INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Display data down and across in 4 columns

Display data down and across in 4 columns

(OP)
Hello!

The code below currently displays my data like this:

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

I'd like the data displayed like this (4 columns across):

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

Also this code was created to show the output fields like this:

city, state zip
company plantype
name
eventdate - eventtime
address

I want to change the order to:

name
eventdate - eventtime
address
city, state zip
company plantype

I can change the order but, what in the code determines the break between blocks of info?

Here's the code I have:

CODE


<?php

    $username="user";
    $host="localhost";
    $password="pwsd";
    $database="mydatabase";

    mysql_connect($host,$username,$password);
    @mysql_select_db($database) or die("Unable to select database");
        
    $query = "SELECT event.eventdate
     , event.eventtime
     , venue.name
     , venue.address
     , venue.city
     , venue.state
     , venue.zip
     , companyplan.company
     , companyplan.plantype
  FROM event
INNER
  JOIN venue
    ON venue.venueid = event.eventplaceID
INNER
  JOIN companyplan
    ON companyplan.planid = event.eventplanID
ORDER
    BY event.eventdate
     , event.eventtime
     , venue.city
     , venue.state";
 
    $result=mysql_query($query);
    $plan = $city = $state = '';
    $first = true;   
?>

<style type="text/css">
    body,div {padding:0; margin:0; line-height:1; font-family:Times New Roman, Times, serif; font-size:70%;}
    #container{margin:0 auto; width:80%; background-color:#f1f1f1;overflow-y:hidden;}
    .citystateplan{width: 25%; min-width: 250px; margin-right:40px; float:left;}
    .name{color:#000000; font-weight: bold; font-size:12}    
    .city{color:#990000; font-weight: bold; font-size:12px;}    
    .plan{color:#000000; font-size:12px}
    .date{color:#000000; font-size:12px}
    .address{margin-bottom: 12px; color:#000000; font-size:12px}
</style>

<?php while ($row = mysql_fetch_array($result)): ?>

<div class="event">
<?php if ($plan !== $row['plantype'] || $state !==$row['state'] || $city !== $row['city']):
        $plan = $row['state'];    
        $city = $row['city'];    
        $plan = $row['plantype'];    
        if (!$first) echo '</div>';
        else $first = false;
?>    

<div class="citystateplan">
<div class="city">
    <?php echo $row['city']; ?>, <?php echo $row['state']; ?> <?php echo $row['zip']; ?>
</div>    
    
<div class="plan">
    <?php echo $row['company']; ?> <?php echo $plan; ?>
</div>
    
<?php endif; ?>        
    <div class="name"><?php echo $row['name']; ?></div>
        <div class="date"><?php echo date("F j, Y ", strtotime($row['eventdate'])). " - " . date("g:i a ", strtotime($row['eventtime']));?></div>
    <div class="address"><?php echo $row['address'];?></div>
        
</div>
    <?php endwhile;?>
</div>

Thanks!

RE: Display data down and across in 4 columns

what you could do is output the whole data set into one column

1
2
3
4
5

and then use a jquery plugin like autocolums to specify how ever many columns you want.

Pretty much the jist is use php to output a one column set of data and use javascript to reformat.

Could be done with php but I dont know how to point you in that right direction.

Darryn Cooke
www.darryncooke.com | Marketing and Creative Services

RE: Display data down and across in 4 columns

Quote:


I can change the order but, what in the code determines the break between blocks of info?

Your CSS determines that by floating your citystateplan divs.

In reality, the PHP is outputting your divs in succession. Which would place them one after the other. The floating CSS makes it so the divs stay on the same line as long as there is room for them. Once the end of the screen is reached they drop to the next line.

The easiest way of getting the layout you want is to add another div to act as your column and hold your inner events, float that one and have a counter so you close the div at the appropriate time.

CODE




<style type="text/css">
    body,div {padding:0; margin:0; line-height:1; font-family:Times New Roman, Times, serif; font-size:70%;}
    #container{margin:0 auto; width:80%; background-color:#f1f1f1;overflow-y:hidden;}
    .citystateplancolumn{width: 20%; min-width: 250px; margin-right:40px; float:left;}
    .name{color:#000000; font-weight: bold; font-size:12}    
    .city{color:#990000; font-weight: bold; font-size:12px;}    
    .plan{color:#000000; font-size:12px}
    .date{color:#000000; font-size:12px}
    .address{margin-bottom: 12px; color:#000000; font-size:12px}
</style>
<div class="event">
<?php
$colfill=0;
<?php while ($row = mysql_fetch_array($result)): ?>
<?php if ($plan !== $row['plantype'] || $state !==$row['state'] || $city !== $row['city']):
        $plan = $row['state'];    
        $city = $row['city'];    
        $plan = $row['plantype'];    
        if (!$first) echo '</div>';
        else $first = false;
if($colfill==0){
?>    
<div class="citystateplancolumn">
<?php } ?>
<div class="citystateplan">
<div class="city">
    <?php echo $row['city']; ?>, <?php echo $row['state']; ?> <?php echo $row['zip']; ?>
</div>    
    
<div class="plan">
    <?php echo $row['company']; ?> <?php echo $plan; ?>
</div>
    
<?php endif; ?>        
    <div class="name"><?php echo $row['name']; ?></div>
        <div class="date"><?php echo date("F j, Y ", strtotime($row['eventdate'])). " - " . date("g:i a ", strtotime($row['eventtime'])); ?></div>
    <div class="address"><?php echo $row['address'];  ?></div>

        
</div>


    <?php
$colfill++;
if($colfill==3){
$colfill=0;
echo "</div>";
}
 endwhile;?>
</div>


 

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 

RE: Display data down and across in 4 columns

(OP)
Thanks that works great (parse error thrown because of that first <?php tag)! Your explaination is very helpfull too!

I'm learning, but I don't get much time to work on the fun stuff.

RE: Display data down and across in 4 columns

ahh yes, my mistake. Glad you got it working though.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close