Display data down and across in 4 columns 1

[Evil8]

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:

<?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!

 

[darryncooke]

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

http://www.darryncooke.com

| Marketing and Creative Services

 

[vacunita]

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.

<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

 

[Evil8]

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.

 

[vacunita]

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