Automatically split text into two columns

Discussion in 'HTML & Website Design' started by lektrikpuke, Jan 15, 2009.

0
  1. #1
    I have text that needs to be automatically split in half and presented in two columns (side by side). Ideas on how this can be done? Note: Text will be drawn from one DB field (hopefully). The columns (in a div) would not be presized except for width - who knows how long the text blurb will be?

    ex:

    text starts here, blah ------|---- automatically HERE. Wouldn't
    blah, blah, blah, blah, blah -|---- it be nice? Blah, blah
    text here that should ------|---- blah, blah, blah, blah, blah
    blah, blah, blah, blah, blah -|---- from other side, blah
    text here that should ------|---- blah, blah, blah, blah, blah
    CONTINUE this paragraph --|
     
    lektrikpuke, Jan 15, 2009 IP
  2. ThePickyOne

    ThePickyOne Peon

    Messages:
    30
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I have a simple example here on how to populate the two columns... this is not intended to be a total solution... just an example that might help you get started. See the code below:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
    <title>Untitled Page</title>
    <SCRIPT ID=clientEventHandlersJS LANGUAGE=javascript>
    <!--
    function button1_onclick() {
    var rawText = 'ColOneText... ColOneText... ColOneText... ColOneText... ColOneText... ColOneText... ColOneText... ColOneText... ColOneText... ColOneText... ColOneText... ColTwoText... ColTwoText... ColTwoText... ColTwoText... ColTwoText... ColTwoText... ColTwoText... ColTwoText... ColTwoText... ColTwoText... ColTwoText... ';
    var colOneText = rawText.substring(0,154);
    var colTwoText = rawText.substring(154,309);
    var col1 = document.getElementById('colOne');
    col1.innerHTML = colOneText;
    var col2 = document.getElementById('colTwo');
    col2.innerHTML = colTwoText;
    }
    //-->
    </SCRIPT>
    </head>
    <body>
    <TABLE cellSpacing=1 cellPadding=1 width="75%" border=1>
    <TR>
    <TD id='colOne'>this is col 1</TD>
    <TD id='colTwo'>this is col 2</TD></TR>
    <TR>
    <TD colspan=2><INPUT id=button1 style="WIDTH: 117px; HEIGHT: 24px" type=button size=40 value="Click Me" name=button1 LANGUAGE=javascript onclick="return button1_onclick()"></TD>
    </TR></TABLE>
    </body>
    </html>
     
    ThePickyOne, Jan 15, 2009 IP
  3. LindseyInteractive

    LindseyInteractive Well-Known Member

    Messages:
    2,830
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    175
    #3
    The previous reply tends to be pretty correct, you would just need to have a script that would pull the information out of your database and then create a table with 2 identical tables (heights and width) and have your code auto drop that text that was pulled from the database into both columns of your database and this should work perfectly for what you are doing.
     
    LindseyInteractive, Jan 15, 2009 IP
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #4
    kk5st, Jan 15, 2009 IP
  5. lektrikpuke

    lektrikpuke Well-Known Member

    Messages:
    297
    Likes Received:
    1
    Best Answers:
    1
    Trophy Points:
    113
    #5
    Thanks guys. The new wunderkind of the company came up with a similar js way to do it (" " var/2), and that's what the boss is going with. Personally, I would have preferred a server-side approach (as suggested), but it's a moot point now. Thanks again. :D
     
    lektrikpuke, Jan 17, 2009 IP