Jump to content

create expanding/contracting grid with mysql results

MsKazza

By MsKazza
in CSS Help

 Share
Go to solution Solved by faithinhim,

Recommended Posts

MsKazza Regular Member

MsKazza

Posted
Posted (edited)

Hi there,

I have a page of products listed on a categories page, at the minute the mysql results are split into 3 columns, but when the page opens on a larger / high res screen there is a lot of space down the right hand side of the products.

 

I was hoping someone might be able to help me so these move when necessary.

 

I have pasted the categories page, if anything else is needed please let me know.

 

Hope to hear from someone. thanks.

MsKazza

<?php  session_start(); 
include('Connections/adlantic.php'); ?>

<!doctype html> 
<html> 
<head> 
 <style>
    /* Remove the navbar's default margin-bottom and rounded borders */ 
    .pagination {
	background: #0066FF;
	border-radius: 15px;
	}
	
	.rest {
	  font:Arial, Helvetica, sans-serif;
	  color:#0066FF;
	  float: left;
    padding: 8px 8px;
    text-decoration: none;
    border: 1px solid #ddd;
    margin: 0 4px;
	 transition: background-color .3s;
    }
	
	.rest a {
	color:#0066FF;
	text-decoration:none;
	 transition: background-color .3s;
	}
    
    /* Set height of the grid so .sidenav can be 100% (adjust as needed) */
    .active {
	  font:Arial, Helvetica, sans-serif;
	  color:#ffffff;
	  background:#0066FF;
	  float: left;
    padding: 8px 8px;
    text-decoration: none;
    border: 1px solid #ddd;
    margin: 0 4px;
    }
	
  </style>
<?php 

 $recordID = $_GET["recordID"];




$result_category = mysqli_query($con, "SELECT products.*, categories.* FROM products INNER JOIN categories ON products.category=categories.id WHERE cat_name='$recordID' AND products.product_publish='1'");
$row_category = mysqli_fetch_assoc($result_category); 


  $metatitle= $row_category['cat_name'];
$metadesc=$row_category['cat_name'];
$metakeywords=$row_category['cat_name'] . "business gifts, corporate gifts, promotional products, promotional items, promotional merchandise,  promotional giveaways, advertising products, sales promotion, giveaways, exhibition, conference, environmentally friendly products, eco products, printed"; 
 


include('header.php'); ?>
<meta http- equiv="content-type" content="text/html;charset=UTF-8">
<script src="js/lightbox-2.6.min.js"></script>
<script type="text/javascript">
$(function() {
//More Button
$('.more').live("click",function() 
{
var ID = $(this).attr("id");
if(ID)
{
$("#more"+ID).html('<img src="moreajax.gif" />');

$.ajax({
type: "POST",
url: "ajax_more.php",
data: "lastmsg="+ ID, 
cache: false,
success: function(html){
$("ol#updates").append(html);
$("#more"+ID).remove();
}
});
}
else
{
$(".morebox").html('The End');

}


return false;


});
});

</script>
<link href="css/lightbox.css" rel="stylesheet" />


<br />
<div style="clear: both;">
<br />
<div class="content-area">

<div class="page-content">

<div class="product">
<div class="product-name">Categories</div>
		
<div class="product-info" style="background:#E5E4E4; margins:auto;">        
<br />
    <table border=0 width="550px" align="center" cellpadding="5" cellspacing="5" bgcolor="#FFFFFF"><tr>
<?php
$result = mysqli_query($con, "SELECT * FROM sub_categories WHERE cat_name='$recordID' ORDER BY subcat_name ")or die($result. "<br/><br/>".mysql_error());

$count = 0;
$max = 4;
while($row = mysqli_fetch_assoc($result))
    {
if (['$result'] > 0){ 
$count++;
echo '<td style="padding:5px;"><img src="eCommerceAssets/images/arrow.png"> <a href="sub_category.php?recordID='.$row['id'].'" class="topbar">'.$row['subcat_name'].'</a></td>';

if($count >= $max){
//reset counter
$count = 0;
//end and restart
echo '</tr><tr>';

}
} elseif ($result = 0) {
echo 'There are no Subcategories available.';
}
}
?>
 </tr></table>
<?php
$recordID = $_GET["recordID"];


// find out how many rows are in the table 
$query = mysqli_query($con, "SELECT COUNT(*) FROM products WHERE category='$recordID' AND product_publish='1'");
$r = mysqli_fetch_array($query);

$numrows = $r[0];



// number of rows to show per page
$rowsperpage = 18;
// find out total pages
$totalpages = ceil($numrows / $rowsperpage);

// get the current page or set a default
if (isset($_GET['currentpage']) && is_numeric($_GET['currentpage'])) {
   // cast var as int
   $currentpage = (int) $_GET['currentpage'];
} else {
   // default page num
   $currentpage = 1;
} // end if

// if current page is greater than total pages...
if ($currentpage > $totalpages) {
   // set current page to last page
   $currentpage = $totalpages;
} // end if
// if current page is less than first page...
if ($currentpage < 1) {
   // set current page to first page
   $currentpage = 1;
} // end if

// the offset of the list, based on current page 
$offset = ($currentpage - 1) * $rowsperpage;

// get the info from the db 
$query = "SELECT * FROM products INNER JOIN images ON products.product_code=images.product_code WHERE category=$recordID AND product_publish='1' ORDER BY product_id  ASC LIMIT $offset, $rowsperpage";
$rs_result = mysqli_query($con, $query);
$cat_name = $row_category['cat_name'];
// always make sure you get a valid result!!!
if($result == false) {
    die("Query failed: ".mysqli_error().PHP_EOL.$query);
}
echo "<br /><br />";
echo "<b>You are viewing page " . $currentpage . " of " . $totalpages . "</b><br />";
echo "We found " . $numrows . " products <br />";

?> 
<?php


if ($rs_result == NULL) {
  echo "There are no products to display in this category";
  }
  
  else {  ?>
  
  <br /><br />
<table align="center" border=0 width="550px" cellpadding="5" cellspacing="5"><tr>
<?php
$count1 = 0;
$max1 = 3;

while($row1 = mysqli_fetch_assoc($rs_result))
    {

$prod_name = $row1['product_name'];
if(strlen($prod_name)>24){
    $prod_name=substr($prod_name,0,24).' ...';
}
if (['$rs_result'] > 0){ 
$count1++;
echo '<td align="center" valign="top">';
echo '<table align="center" bgcolor="#ffffff" width="160"><tr><td height="5" align="center">';
echo '</td></tr><tr><td align="center">';
echo '<a href="product.php?name=';
echo $row1['slug'];
echo '" class="topbar">';
echo '<img src="eCommerceAssets/images/products/';
echo $row1['product_image_big1'];
echo '" width="150" height="200">';
echo '</a>';
echo '</td></tr><tr><td align="center">';
echo '<strong><a href="product.php?name=';
echo $row1['slug'];
echo '" class="prod-name">';
echo $prod_name;
echo '</a></strong><br />';
echo '<a href="product.php?name=';
echo $row1['slug'];
echo '" class="button">More Info</a><br />';
echo '</td></tr></table><br /><br />';
echo '</td>';

if($count1 >= $max1){
//reset counter
$count1 = 0;
//end and restart
echo '</tr><tr>';

}
} elseif ($rs_result = 0) {
echo 'There are no products available.';
}
}
?>
 </tr></table>

 <?php
}   // close while loop
echo "<br />";
/******  build the pagination links ******/


// range of num links to show
$range = 3;

// if not on page 1, don't show back links
if ($currentpage > 1) {
   // show << link to go back to page 1
   echo "<span class='rest'> <a href='?recordID=$recordID&currentpage=1'><<</a> </span>";
   // get previous page num
   $prevpage = $currentpage - 1;
   // show < link to go back to 1 page
   echo "<span class='rest'>  <a href='?recordID=$recordID&currentpage=$prevpage'><</a></span> ";
} // end if 

// loop to show links to range of pages around current page
for ($x = ($currentpage - $range); $x < (($currentpage + $range) + 1); $x++) {
   // if it's a valid page number...
   if (($x > 0) && ($x <= $totalpages)) {
      // if we're on current page...
      if ($x == $currentpage) {
         // 'highlight' it but don't make a link
         echo "<span class='active'> <b>$x</b> </span>";
      // if not current page...
      } else {
         // make it a link
         echo "<span class='rest'><a href='?recordID=$recordID&currentpage=$x'>$x</a> </span>";
      } // end else
   } // end if 
} // end for
                 
// if not on last page, show forward and last page links        
if ($currentpage != $totalpages) {
   // get next page
   $nextpage = $currentpage + 1;
    // echo forward link for next page 
   echo "<span class='rest'> <a href='?recordID=$recordID&currentpage=$nextpage'>></a></span>";
   // echo forward link for lastpage
   echo "<span class='rest'>  <a href='?recordID=$recordID&currentpage=$totalpages'>>></a></span>";
} // end if

/****** end build pagination links ******/



 // close if
?>
</div>


</div>

</div><!-- end of page-content -->

<div class="left-side">
<?php include('menu.php'); ?>

</div><!-- end of left side panel -->
</div><!--end of content-area-->
<br />

<div style="clear: both;"><br />
<?php include('footer.php'); ?>

</div>

		<script src="js/cbpFWTabs.js"></script>
		<script>
			new CBPFWTabs( document.getElementById( 'tabs' ) );
		</script>


</body>
</html>
Edited by MsKazza
maxxd Prolific Member

maxxd

Posted
Posted

First and foremost, please organize and format your source. You've got queries (some of which may be redundant - I haven't had enough coffee yet this morning to properly tell) mixed in with HTML, none of which is indented properly so it's difficult to see what you're actually doing. You're also opening and closing PHP at times to output straight HTML while at other times, you're printing the HTML from within PHP. It's all very confusing. I suspect this might be the reason you've not gotten a reply on this topic.

 

However, to your actual question. It looks like (again, hard to read) you're using tables to display your products. Without JavaScript, you won't be able to add or remove table cells within a row depending on monitor size, and PHP is processed on the server, which doesn't know and doesn't care about your user's browser width. Try using something other than a table for output - look into flexbox. There are some gotchas depending on your browser support requirements, but those are easy enough to get around once you figure them out. And you won't be dependent on JS for proper output, which is going to make the site easier to style responsively.

  • 4 weeks later...
  • Solution
faithinhim Newbie

faithinhim

Posted
  • Solution
Posted

bootstraps .row, .column, and and .contianer-fluid are just what you want.  load it over cdn.  or monkey with flex.  flex is a great tool, but bootstrap really requires little css knowlege.  just follow the directions.  if you look around you can find tools to style it and strip it down if you need

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.