www.webdeveloper.com
Results 1 to 3 of 3

Thread: Displaying Dynamic List Data Properly

  1. #1
    Join Date
    Mar 2011
    Posts
    7

    Cool Displaying Dynamic List Data Properly

    Hi, I am making my first eCommerce site and am having trouble understanding how to pull my dynamic list data into a three column table so like | pic | pic | pic | I have tried everything I can think of, and I imagine the answer is simple as always. Thanks for any help, it is much appreciated! here is the code I am using atm:

    PHP Code:
    <?php 

    include "storescripts/connect_to_mysql.php"
                        
    $dynamicList '';

    $sql mysql_query("SELECT * FROM products ORDER BY date_added DESC LIMIT 16");
    $productCount mysql_num_rows($sql); // count the output amount

    if ($productCount 0) {
        while(
    $row mysql_fetch_array($sql)){ 
                
    $id $row["id"];
                 
    $product_name $row["product_name"];
                 
    $price $row["price"];
                 
    $date_added strftime("%b %d, %Y"strtotime($row["date_added"]));
                 
    $dynamicList .= '<table width="870" border="0" cellspacing="0" cellpadding="6">
        <tr>
              <td width="17%" valign="top"><a href="product.php?id=' 
    $id '"><img style="border:#666 1px solid;" src="../inventory_images/' $id '.jpg" alt="' $product_name '" width="178" height="230" border="1" /></a><br /> ' $product_name '<br />
                ' 
    $price '<br />
                <a href="product.php?id=' 
    $id '">More Info</a></td>
            </tr>
          </table>'
    ;
          
          
        }
    } else {
        
    $dynamicList "We have no products listed in our store yet";
    }
    mysql_close();
    ?>

  2. #2
    Join Date
    Aug 2004
    Location
    Ankh-Morpork
    Posts
    19,175
    My first suggestion would be to use floated HTML elements instead of a table, which allows them to fill the available space instead of being hard-coded into a fixed number of table columns, e.g.:
    PHP Code:
    <html>
    <head>
    <title>Test</title>
    <style type='text/css'>
    .container {
       border: solid 2px blue;
       padding: 0;
       overflow: auto; /* this takes care of clearing the floats */
       width: auto;
    }
    .test {
       float: left;
       margin: 0.5em;
       padding: 0.5em;
       border: solid 1px teal;
       height: 8em;
       width: 10em;
       overflow: auto;
    }
    </style>
    </head>
    <body>
    <h1>This Is a Test</h1>
    <div class='container'>
    <?php
    for($i 1$i <= 10$i++) {
       
    $text str_repeat("This is a test."rand(1,5));
       echo 
    "<div class='test'><p>$text</p></div>\n";
    }
    ?>
    </div> <!-- container -->
    <p>This is the end of the test, and should come after our repeating DIVs.</p>
    </body>
    </html>
    Then just replace the for() loop in the above example with your loop on the query data (adjusting it to output the floating elements as above instead of table cells).

    If you really want/need to use a table, the typical pattern is to use a counter variable that gets incremented on each loop iteration, and if it is evenly divisible by the desired number of columns, then you insert a "</tr>\n</tr> before the next <td>. This can get kind of fiddly though to keep the resulting HTML valid, and HTML tables in general can slow down page rendering in some cases, especially if you have nested tables.
    "Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be."
    ~ Terry Pratchett in Nation

    eBookworm.us

  3. #3
    Join Date
    Mar 2011
    Posts
    7

    resolved Sweet

    excellent reply, thank you for bothering! I knew I had to try and increment the data to output into separate table rows and that is what was giving me the headache. I've ended up forgetting the table idea completely (as a friend was the one who suggested it) and going back to what I know with CSS, this way I've managed to keep the code the same and can make it look how I like - Thanks for your effort it is greatly appreciated!

    here is my code if it helps anyone:

    PHP Code:
    <?php 

    include "storescripts/connect_to_mysql.php"
                        
    $dynamicList '';

    $sql mysql_query("SELECT * FROM products ORDER BY date_added DESC LIMIT 16");
    $productCount mysql_num_rows($sql); // count the output amount

    if ($productCount 0) {
        while(
    $row mysql_fetch_array($sql)){ 
                
    $id $row["id"];
                 
    $product_name $row["product_name"];
                 
    $price $row["price"];
                 
    $date_added strftime("%b %d, %Y"strtotime($row["date_added"]));
                 
    $dynamicList .= '<div class="dynamicList">
        
        <a href="product.php?id=' 
    $id '"><img style="border:#666 1px solid;" src="../inventory_images/' $id '.jpg" alt="' $product_name ' "align="left" width="178" height="230" border="1" /></a>
              
            <p>  
               ' 
    $product_name '</p>
              <p>   ' 
    $price '</p>
              <p>   <a href="product.php?id=' 
    $id '">More Info</a></p>
           </div> '
    ;
            
        }} else {
        
    $dynamicList "We have no products listed in our store yet";
    }
    ;
    mysql_close();
    HTML Code:
    DIV.dynamicList
    {
    	position: relative;
    	float: left;
    	overflow: hidden;
    	padding-right: 60px;
    }
    DIV.dynamicList P, A
    {
    	text-align: left;
    	text-decoration: none;
    	color: #666;
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles