Smart questions
Smart answers
Smart people
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Member Login
Remember Me
Forgot Password?
Join Us!

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips now!
  • 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!
Join Tek-Tips
*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

LINK TO THIS FORUM!

Add Stickiness To Your Site By Linking To This Professionally Managed Technical Forum.
Just copy and paste the
code below into your site.

Tek-Tips LinkedIn® Group

Partner With Us!

"Best Of Breed" Forums Add Stickiness To Your Site
Partner Button
(Download This Button Today!)

Feedback

"...just the few hours I've spent on this site I have learned a lot. I can now implement features that will be very useful to my company, and some of those I never knew existed..."
More...

Geography

Where in the world do Tek-Tips members come from?
Click Here To Find Out!

Tek-Tips Shirts!

Get Tek-Tips Swag
Get your
Tek-Tips Forums
SWAG here!
Home > Forums > Programmers > Web Development > Adobe: Dreamweaver MX (UltraDev) Forum

Display data down and across in 4 columnsHelpful Member! 

thread770-1669538
Read More Threads Like This One
Evil8 (MIS)
14 Dec 11 15:38
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!
darryncooke (TechnicalUser)
15 Dec 11 2:24
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

Helpful Member!  vacunita (Programmer)
15 Dec 11 12:30

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
 
Evil8 (MIS)
15 Dec 11 14:45
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 (Programmer)
15 Dec 11 15:42
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
 
Read More Threads Like This One

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!

Back To Forum

Back To Adobe: Dreamweaver MX (UltraDev)

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