[archived] jcb_columnize_body

marco · 2005-06-04 13:53:54

> jimb wrote:

> I will start working on a javascript version based on the Smoking Gun code right away.

Super! That will give TXP a unique feature that is not available in any other Blog/CMS

I think a site’s usability may also be increased by the scrolling, multi-column feature.

Of all the online newspapers I read, I like the IHT most, of course not only for its usability
and aesthetics, but primarily for the content. But the nice layout doesn’t hurt either…

davidm · 2005-06-04 17:47:52

<blockquote> jimb wrote: Version 0.3 of jcb_columnize is available. This included Etz’s code and a few other options.</blockquote>

That’s very cool I’ll install it right away !

On the server-side vs javascript thing, I’ll go with server-side, much better option IMHO

<blockquote>davidm: It would be really easy to add a feature such as you suggest. Can you be a little more specific about how you would like it to operate?</blockquote>

Well, I did not try to use etz_pg with your plugin, maybe it could be done. Nor did I try 0.3 yet…
But what I had in mind was something like : I insert a symbol (something like === or whatever), and the plugins understands it has to create a new column. Better, I specify a number of words, e.g <txp:jcb_columnize words="120" /> (or characters) that defines a limit before it starts another column. Here the plugin would start a column when the plugin reaches 120 words.

Last edited by davidm (2005-06-04 17:49:01)

jimb · 2005-06-07 02:41:11

davidm:

I think I understand now. Look for 0.4 very soon (a few days-ish)- it will have what you want.

davidm · 2005-06-07 09:31:05

Thanks jimb !

0.3 is very nice already. If you can define columns page breaks in 0.4, it’s gonna be a real dream for webzines !
This plugin is yet another reason to choose textpattern :D

sekhu · 2005-06-07 10:08:03

this seems like such an excellent plugin but i’m still trying get my head around it. Is there any chance someone could do a step by step walkthrough in using this for idiots like me? I sort of get the idea, I just can’t seem toget a practical grasp of it and how I could use it.

I’m guessing that you could use it for a complex site where you have several sections/categories of excerpts – using the plugin you would add the code to the page content, and within each column place the excerpt of a certain number of cats which would sit in those columns? Or something like that?

davidm · 2005-06-07 12:36:22

A LITTLE GLITCH TO CORRECT IN HELP

There are still a little glitch in the help of 0.3 : styles are no longer column1, column2 but columnized1, columnized2.
The css example should be changed accordingly.

BTW, thanks jimb for including my CSS example in the help file :-)

THE SAMPLE CSS : THINGS I THINK WE SHOULD INCLUDE

I just think we need to add an example for 3 columns and give a little notice for beginners to help them understand how it’s done (And here, I’ll need help to make sure those example work in other context…).

<blockquote>
Examples :

This works for two columns
.columnized1 {float: left; width: 225px; padding: 5px;}
.columnized2 {margin-left: 250px; width: 225px; padding: 5px;}

This works for three columns
sample css here

How to calculate columns
width of column = (width of parent div / number of columns) – any padding or margins defined for columns and/or parent div
</blockquote>

I’ll need help to check this formula is correct, and also create if anyone has a working css for 3 or more columns, it would be nice.

<strong>THE QUESTION OF UNIQUE CLASS : HOW DO YOU CREATE COLUMN WITH JUST ONE CLASS ?
:AFTER PSEUDO-CLASS ?</strong>

Also I have a very dumb question but it struck me : How do you make the css columns work with the plugin set to a unique class (classes=unique parameter) ? e.g how do you set the float, you can not define the unique class to float since you can’t have a floating element based on another floating element if I remember correctly ? Maybe use pseudo class :after ?

I didn’t think of this, but we have to define one more CSS example for parameter classes=unique

USE SPANS WITH SPLITONTAG TO CONTROL COLUMN SPLITS

Other than that, the splitontag option already gives some kind of control over “column breaks”, now you can use spans to indicate where you want the column to split. Did not try it but should help me, thanks Etz :-)

Last edited by davidm (2005-06-07 12:59:58)

davidm · 2005-06-07 13:06:46

<blockquote>sekkhu wrote : this seems like such an excellent plugin but i’m still trying get my head around it. Is there any chance someone could do a step by step walkthrough in using this for idiots like me? I sort of get the idea, I just can’t seem toget a practical grasp of it and how I could use it. </blockquote>

I am replying in a different post since the last was so long…
Yeah I understand you having problem with this one. It relies a both on code and some CSS tricks to work…

I’ll try to contribute to a walkthrough, when I make some time for this…

<blockquote>sekkhu wrote : I’m guessing that you could use it for a complex site where you have several sections/categories of excerpts – using the plugin you would add the code to the page content, and within each column place the excerpt of a certain number of cats which would sit in those columns? Or something like that?</blockquote>

A very interresting use of the plugin. Didn’t yet try this, as I said I did not try a working 3 or more columns CSS code.
But yeah it would be doable with the splitontag parameter you could define spans to indicate where to split the columns, and txp:output_form with one form set by columns, to have the kind of effect you suggest… :-)

Last edited by davidm (2005-06-07 13:08:21)

sekhu · 2005-06-07 14:10:26

sounds great davidm i’ll look forward to your write up:)

vagari · 2005-06-08 17:58:41

Wow I worked on doing something like this a little while ago. I found that every time I pushed it beyond the basics while trying to get uniform height columns I always broke validation. Text was easy, throwing in links and other elements, not so much. I was trying server side.

If you go Javascript client side just make sure you don’t do anything to hide the content. I never got to go over the Herald Tribune site with a fine toothed comb but I’m sure you can manipulate the text without hiding it. Basically if javascript is turned off it should just be one column, the same as if CSS wasn’t on to layout the columns.

The only thing I think I accomplished that you don’t really have yet is the split into 3+ columns. Mine could get a number passed and split it into as many columns as needed.

Great job, I’m glad someone figured out a good method for building this… I’ll let you know if I ever figure out splitting it with almost perfect heights. ;) ha, yeah right… I tip my hat to you.

phiw13 · 2005-06-09 05:03:10

> davidm wrote:

Also I have a very dumb question but it struck me : How do you make the css columns work with the plugin set to a unique class (classes=unique parameter) ? e.g how do you set the float, you can not define the unique class to float since you can’t have a floating element based on another floating element if I remember correctly ? Maybe use pseudo class :after ?

I didn’t think of this, but we have to define one more CSS example for parameter classes=unique

What about floating all your columns ?

.columns {float:left; width: 250px; padding: 5px;}

And then give them a margin-right to create a gutter ?

That is how I implement most of my column designs.

And what would you like to do with :after ? This pseudo class is not adressing the ‘next block element’ as you seem to imply. It only generates something, in relationship to the current element.

davidm · 2005-06-09 10:55:22

phiw13, I guess you’re right, couldn’t work assigning a column class for the first column, and a column:after for the following ones… this would be self-referencing, indeed…

<blockquote><strong>phiw13 wrote</strong> : What about floating all your columns ?
.columns {float:left; width: 250px; padding: 5px;}</blockquote>

Could work, yes… I you say it works for you…
I just thought a floating element was floating in relationship with a non-floating one (?)

That’s my my sample CSS has a first non-floating element. Could you try to give a working solution, cause I don’t see how it would work with dynamic content if I don’t define a height for the parent element (which in turn will cause overflow problems…). I guess we need a John Hicks there ! John ? I am just a padawan, not a CSS master ;-)

Also one of the concern is cross-browser problems (like IE float bug).

Ahhhh, I wished we already had CSS3 mutiple-column model !!!

Last edited by davidm (2005-06-09 10:57:50)

phiw13 · 2005-06-09 12:23:01

> davidm wrote:

Ahhhh, I wished we already had CSS3 mutiple-column model !!!

I do use that already :-)
Visit the site in my sig (emps.l-c-n.com), in the article section, and select the alternate stylesheet.
You’ll need a recent nightly build of Firefox for it to work however (the DeerPark alpha release will do).

Although, I’m not convinced that multicolumn text is the best solution for onscreen text. I implemented it on that site, for fun and for testing purposes, I’ve tweaked quite a bit since first implementing that (and filed some bugs in Bugzilla as well). I see multi-column layout as much more useful for projection or print media. I’ll use it for printed docs for an important paid gig, once Firefox 1.1 comes out, this summer somewhere.

Now to the suject at hand: I suggested to float all columns left, as this avoids most of the problems with that one browser (you know, that one). Then floated blocks must come first in the source (in reference to the parent block). A very quick dummy.

For dynamic content, you’d need to calculate how much content goes into one column, and dynamically insert breaks (javascript seems the best option here) to port the overflowing text to a second column, and the next column, and the next,… That is what the IHT newspaper does, IIRC — I haven’t checked for a while how that site behaves.

You’ll need to define height somehow for it to work.

I think that is what you attempt to do, at least.

Last edited by phiw13 (2005-06-09 12:36:08)

Textpattern CMS

Textpattern CMS support forum

#37 2005-06-04 13:53:54

Re: [archived] jcb_columnize_body

#38 2005-06-04 17:47:52

Re: [archived] jcb_columnize_body

#39 2005-06-07 02:41:11

Re: [archived] jcb_columnize_body

#40 2005-06-07 09:31:05

Re: [archived] jcb_columnize_body

#41 2005-06-07 10:08:03

Re: [archived] jcb_columnize_body

#42 2005-06-07 12:36:22

Re: [archived] jcb_columnize_body

#43 2005-06-07 13:06:46

Re: [archived] jcb_columnize_body

#44 2005-06-07 14:10:26

Re: [archived] jcb_columnize_body

#45 2005-06-08 17:58:41

Re: [archived] jcb_columnize_body

#46 2005-06-09 05:03:10

Re: [archived] jcb_columnize_body

#47 2005-06-09 10:55:22

Re: [archived] jcb_columnize_body

#48 2005-06-09 12:23:01

Re: [archived] jcb_columnize_body

Board footer