20 Responses to jQuery.column

1. 

   Moss

   2011-09-24 at 02:33

   Is this supposed to be able to work with images? I tried it out on a div full of images (each wrapped in their own divs) and it made a mess. It made three columns but the second two are empty and it put all the sub divs underneath the first one in the hierarchy!
2. 

   Martijn

   2011-09-26 at 07:34

   The reason is that currently only top-level elements are handled; if it’s text, the text will be split up into separate words, if not, the element will be handled as is. This has to do with styling issues; divs would have to be split into two, at which point things like margin-top cannot readily be copied to clone divs. That being said, it should handle separate divs as separate elements.
   Do you have an example of HTML that is handled incorrectly?
3. 

   Eitan

   2011-10-03 at 20:41

   Doesn’t seem to work on ie checked on 7 & 8.
4. 

   Vyache

   2011-10-04 at 21:07

   Can this thing handle tables that are bigger then a single column. Say I want to have a article, then a table, where the article content would flow around the table in a “S” motion or even turn the table on its side to fit the other content on the next page and the table will fit on its own page.
5. 

   Martijn

   2011-10-05 at 09:47

   I tested it on IE8/9 myself. Could you please send me an example of code that doesn’t work in IE7/8?
6. 

   Martijn

   2011-10-05 at 09:50

   Currently not. The problem with handling tables and such is that they may have style applied to the top and bottom of the table.
   Cutting the table in multiple parts would duplicate these styles so until I’ve figured out a way to handle this, it’s seen as a large, single, undivideable block, like an image.
7. 

   aery

   2011-10-29 at 01:36

   Your example does not works on IE 7, 8 and 9 on Windows.
8. 

   Martijn

   2011-10-29 at 10:00

   The problem seems to be with the WordPress popup for the demo; open the URL in IE and it works fine.
   I’ll figure out what the problem is and fix it.
9. 

   gv

   2011-11-07 at 11:23

   line 140 should be:
   
+ (c > 0? 'left:'+(left - Math.floor(column_gap / 2))+'px;' : '')


   (you need to subtract the padding-left from the left: or else everything after the first column gets bumped too far to the right)

   Thanks for the plugin… hope you figure out an IE fix soon, because it works nice.
10. 

    Martijn

    2011-11-07 at 21:04

    @gv: Thanks for the fix, it’s in github now.
    Works fine in IE8 and IE9. I don’t have a system with IE7 to test.
11. 

    gv

    2011-11-08 at 01:51

    Works for me in IE8, but in IE9 it throws this error, if it helps:

    SCRIPT16389: Incorrect function.

    jquery.column-1.0.js, line 66 character 9

    I tried googling the error briefly, but haven’t had a chance to look deeper.
12. 

    Martijn

    2011-11-12 at 10:53

    @gv: From what I can see, this issue is a problem with IE9.
    I’ve applied a simple workaround so it works on IE9 again. Latest version is not in github.
13. 

    Xandor Schiefer

    2011-11-17 at 16:34

    I used this on a section that had a definition list in it. In order to do so, I had to go several levels deeper. I replaced:

    function _split(parent) {
    var contents = new Array;
    $(parent).contents().each( function(index, value) {
    if (value.nodeType == 3) { // Node.TEXT_NODE
    contents = contents.concat(split_strategies[settings.split](value));
    } else {
    contents.push(value);
    }
    });
    return contents;
    }

    with:

    function _split(parent) {
    var contents = new Array;
    $(parent).contents().each( function(index, value) {
    if (value.nodeType == 3) { // Node.TEXT_NODE
    contents = contents.concat(split_strategies[settings.split](value));
    } else {
    $(value).contents().each( function(index, child) {
    if (value.nodeType == 3) {
    contents = contents.concat(split_strategies[settings.split](child));
    } else {
    $(child).contents().each( function(index, grandchild) {
    if (value.nodeType == 3) {
    contents = contents.concat(split_strategies[settings.split](grandchild));
    } else {
    contents.push(child);
    }
    });
    }
    });
    contents.push(value);
    }
    });
    return contents;
    }

    Perhaps you could add some recursion to make this work as deep as it needs to go?
14. 

    gv

    2011-12-14 at 00:18

    I tried your ie9 fix, and it caused a bit of a ruckus… it worked fine in your demo, but on my site, everything got pushed to the last column. I did some digging around and found a cause and fix for the ie9 bug on the previous version of your code…

    change line 67 from:

    node = node.splitText(split);

    to:

    if (split < node.length) {
    node = node.splitText(split);
    } else {
    split = 0;
    }

    Apparently, IE9 is the only browser that can't handle splitText when the divider equals the length, so if you just check for that, everything's kosher. (btw, this should also be done under the sentence function as well…)

    Thanks again for an awesome script.
15. 

    Martijn

    2011-12-19 at 21:27

    @gv, I’ve just pushed your fix to github.

    @Xandor: I haven’t included your patch. The problem is that by doing it the way you describe, you’re actually altering the structure of HTML. It might look right for definition lists but it doesn’t work for numbered lists or paragraphs, for example.

    It’s quite a hard problem, that I don’t think is possible to fix without a ridiculous amount of code (essentially you’d need special code for each HTML tag and CSS style)

    If you still want it, you can replace the block of code you added inside the _split function with contents.concat(_split(value));, which does proper recursion to any depth.

16. Pingback: 2012년 4월 2일 it 기술 동향 |

17. 

    Duncan Malashock

    2013-01-07 at 06:53

    Hi Martijn,

    Thanks for a great plugin! I’m trying to solve a problem with a responsive layout and I think your plugin is the closest I can find to a solution. I’m curious if it can be modified to use a maximum height, so users can read a long article of continuous text in multiple columns and rows without scrolling up and down to start the next column.

    That’s a mouthful, but see this StackOverflow post if you want a better explanation with images: http://stackoverflow.com/questions/14188659/managing-text-columns-in-responsive-layout

    Thanks again,
    Duncan
18. 

    Tony

    2013-03-05 at 12:57

    What about the height of the columns, how can you define that?
19. 

    Martijn

    2013-03-09 at 15:08

    Currently you cannot.
    The reason is that you’d then need to either crop any overflow or generate additional (sets of) columns on the fly, neither of which I considered desirable when I created .column().
20. 

    Matt Chick

    2013-03-26 at 00:35

    Great piece of work.

    I needed to use it “nested” within a layout – i.e. one where the columns would appear next to other elements. This meant the first column was not on the far left of the screen, but would be positioned to the left of another element.

    To do this I just changed the script around line 135 from

    var left = 0

    to

    var position = $(element).offset().
    var left = position;

    Seems to work fine and keeps works for responsive web design. Not sure if it is useful to anyone else, or whether there would be wider implications of its usage.

    Also – I found that I was getting an occassional bug (even before I amended the script) in ie (where esle!). It would make the first column disapear. To overcome this I called the function on window.load. Again – might be useful for someone.