I have a code where i will be displaying more than three graphs at a time. I have used div tag and tables to separate each graphs and display everything one below the other. But when i try to use a javascript function to just view one graph and hide the rest. The position of the graph changes. The graph will be shown in an incomplete way.
It normally displays in the following way:http://i47.tinypic.com/or1d91.png
But when i use javascript function it is being displayed as:http://i48.tinypic.com/345zkeq.png
I am including the code below for javascript and html part:
<script>
hideAllDivs = function () {
$("#uae").hide();
$("#ksa").hide();
$("#iran").hide();
};
handleNewSelection = function () {
hideAllDivs();
switch ($(this).val()) {
case '1':
$("#ksa").show();
break;
case '2':
$("#uae").show();
break;
case '3':
$("#iran").show();
break;
}
};
$(document).ready(function() {
$("#view").change(handleNewSelection);
// Run the event handler once now to ensure everything is as it should be
handleNewSelection.apply($("#view"));
});
</script>
</head>
<body>
<table align="center"><tr><td><select id="view">
<option value="">Overall</option>
<option value="1">KSA</option>
<option value="2">UAE</option>
<option value="3">IRAN</option>
</select>
</td></tr></table>
<div id="country">
<table align="center">
<tr><td style="width:800px;height:500px"><div id="container5" style="min-width: 400px; height: 400px; margin: 0 auto;margin-top:50px"></div></td>
<td><table style="border: solid thin #000"><th>Country</th><th>Risk Score</th><?php foreach( $names4 as $n){
echo "<tr><td>";
echo $n[0];
echo "</td><td>";
echo $n[1];
echo "</td></tr>";}
?></table>
</td></tr>
</table>
</div>
<div id="ksa">
<table align="center">
<tr><td style="width:800px;height:500px"><div id="container2" style="min-width: 400px; height: 400px; margin: 0 auto;margin-top:50px"></div></td>
<td><table style="border: solid thin #000"><th>Username</th><th>Risk Score</th><?php foreach( $names1 as $n){
echo "<tr><td>";
echo $n[0];
echo "</td><td>";
echo $n[1];
echo "</td></tr>";}
?></table>
</td></tr>
</table>
</div>
<div id="uae">
<table align="center">
<tr><td style="width:800px;height:500px"><div id="container3" style="min-width: 400px; height: 400px; margin: 0 auto;margin-top:50px"></div></td>
<td><table style="border: solid thin #000"><th>Username</th><th>Risk Score</th><?php foreach( $names2 as $n){
echo "<tr><td>";
echo $n[0];
echo "</td><td>";
echo $n[1];
echo "</td></tr>";}
?></table>
</td></tr>
</table>
</div>
<div id="iran">
<table align="center">
<tr><td style="width:800px;height:500px"><div id="container4" style="min-width: 400px; height: 400px; margin: 0 auto;margin-top:50px"></div></td>
<td><table style="border: solid thin #000"><th>Username</th><th>Risk Score</th><?php foreach( $names3 as $n){
echo "<tr><td>";
echo $n[0];
echo "</td><td>";
echo $n[1];
echo "</td></tr>";}
?></table>
</td></tr>
</table>
</div>
</body>
</html>
I believe your problem is in the div within the table, div = container 5, div container 2 , div contaier 3 etc. Your giving the table a width of 800px then within that your placing a div that gives you 400 px; , it is 100% NOT THE JAVASCRIPT, it is the calculated css
Related
I have view file on my app there is code array I want to get first object of that array without going in loop.
<?php
$result = array_chunk($products->result_array(), 3);
foreach($result as $products){ ?>
<table style="width:100% style="page-break-after:always;" >
<tr>
<?php
foreach($products as $productArray){
$product = (object) $productArray;
echo '<td>';
?>
<div style="width: 100%; height: 210px; border: 1px solid #dddddd; margin: auto 5px 5px 0; padding: 5px;">
<div class="box-header">
<p class="box-title"><FONT SIZE=12><?php echo $product->product_name; ?></FONT></p>
</div>
<div style="height: 100px; text-align: center;">
<?php echo '<img src="'.'uploads/'. $product->photo.'" class="img-responsive" style="height:100px !important; width: 150px !important" />'; ?>
</div>
<div style="clear: both"></div>
<table class="table table-responsive">
<tr>
<th><FONT SIZE=12>ID</FONT></th>
<td><FONT SIZE=14><?php echo $product->product_id; ?></FONT></td>
</tr>
$result is array of object I'm getting from a form. In below you can clearly see I'm chunking it to 3 more array and looping though individual objects and getting their details to html for example.
<tr>
<th><FONT SIZE=12>ID</FONT></th>
<td><FONT SIZE=14><?php echo $product->product_id; ?></FONT></td>
</tr>
I want to get the first object details let's say want get $product->product_name of first object of result array without going in loop how to achieve that.
here is complete view file code.
<!DOCTYPE html>
<html class="bg-black">
<head>
<meta charset="UTF-8">
<title><?php if(isset($title)) echo $title.' | '; ?> Sales agent management software (SAMS) </title>
<style>
body{
font-size: 9px;
margin: 20px;
}
th,td,p,div,table,h3{margin:0;padding:0}
#page { margin: 20px; }
.header{
border-bottom: 0px solid #dddddd;
text-align: center;
position: fixed; top: 0;
}
.footer { position: fixed; bottom: 0px; text-align: center }
.pagenum:before { content: counter(page); }
</style>
</head>
<body>
<?php
$usd = get_option('lkr_per_usd', 134);
?>
<div class="footer">
Page: <span class="pagenum"></span>, creation time : <?php echo date('l jS \of F Y h:i:s A') ?>, create by: <?php echo user_full_name(singleDbTableRow(loggedInUserData()['user_id'])); ?>, $ Rate : Rs. <?php echo $usd; ?> </div>
<br />
<div class="box-body">
<?php
$usd = get_option('lkr_per_usd', 134);
?>
<?php
$result = array_chunk($products->result_array(), 3);
foreach($result as $products){ ?>
<table style="width:100% style="page-break-after:always;" >
<tr>
<?php
foreach($products as $productArray){
$product = (object) $productArray;
echo '<td>';
?>
<div style="width: 100%; height: 210px; border: 1px solid #dddddd; margin: auto 5px 5px 0; padding: 5px;">
<div class="box-header">
<p class="box-title"><FONT SIZE=12><?php echo $product->product_name; ?></FONT></p>
</div>
<div style="height: 100px; text-align: center;">
<?php echo '<img src="'.'uploads/'. $product->photo.'" class="img-responsive" style="height:100px !important; width: 150px !important" />'; ?>
</div>
<div style="clear: both"></div>
<table class="table table-responsive">
<tr>
<th><FONT SIZE=12>ID</FONT></th>
<td><FONT SIZE=14><?php echo $product->product_id; ?></FONT></td>
</tr>
<tr>
<th><FONT SIZE=12>LKR</FONT></th>
<td><FONT SIZE=14><?php $lkr = get_selling_price($product);
echo number_format(round($lkr, get_option('round_precision')) ); ?></FONT>
</td>
</tr>
<tr>
<th> <FONT SIZE=12>US $</FONT></th>
<td><FONT SIZE=14><?php echo number_format(round(lkr_to_usd($lkr), get_option('round_precision')) ); ?></FONT></td>
</tr>
</table>
<?php $GLOBALS['a']= $product->product_id; ?>
</div>
</td>
<?php } ?>
</tr>
<?php } ?>
</table>
</div><!-- /.box-body -->
</body>
</body>
</html>
ok man as i said u need to change your way of writing codes but about your specific question use this:
$result = array('a', 'b', 'c', 'd', 'e');
reset($array);
$first = current($array);
you can check this:
http://php.net/manual/en/function.reset.php
http://php.net/manual/en/function.current.php
But still about your way of coding. u should soon go to MVC or such ways of programming so u should separate your view and coding logics
like u may have a page like view_profile.php which is going to show user's information. in regular coding u have this:
view_profile.php:
<?php session_start();
// you check sessions to see if the user is logged in and has the right to view this page.
// like:
if ($_SESSIONS['is_user_logged_in']){
$username=$_SESSIONS['username'];
$name=$_SESSIONS['name'];
// ....
}else{
header('location: ./login.php');// if user is not authenticated u redirect to login page
exit();// prevents the rest of codes to be shown and executed
}
?>
<html>
<head>
<title>View <?php echo $name; ?>'s profile</title>
</head>
<body>
<div>Name: <span><?echo $name; ?></span></div>
......
</body>
</html>
But in a better way u can do it like this:
you have files like
'view_profile.htm' // holds the HTML
'view_profile.php // holds the PHP logic
'inc.php' // holds some useful functions that help you in writing PHP logic
view_profile.htm
<html>
<head>
<title>View <?php echo $name; ?>'s profile</title>
</head>
<body>
<div>Name: <span><?echo $name; ?></span></div>
......
</body>
</html>
inc.php
<?php
function ses_start(){
if(!session_id()){
session_start();
}
}
function ses_get($key){
ses_start();
if(!empty($_SESSION[$key])){
return $_SESSION[$key];
}
return NULL;
}
function ses_set($key,$val){
$_SESSION[$key]=$val;
}
function is_user_loggedin(){
ses_start();
if(!empty(ses_get('is_user_loggedin')){
return true;
}
return false;
}
function go($to){
header('location: '.$to);
exit();
}
//and lots of useful functions that help u connect and work with data base.
view_profile.php
<?php
include('inc.php');
if(is_user_loggedin(){
$username=ses_get('username');
$name=ses_get('name');
//...
}else{
go('login.php);
}
include('view_profile.html); // and u call the .htm file that holds the HTML the view file)
?>
this was a simple sample of separating codes logic(php codes) from views(html tags)
and also u may search about MVC Model-View-Controller and try working with simple MVC frameworks.
I am having two drop down lists on a html page. The data is coming from a mysql database and contains information like latitude, longitude and address. The user selects one item from the drop down and clicks on submit.
At this stage, I want to display a google map and put a marker at the latitude and longitude. Then, when the user selects the option from second drop down, I want to just add a marker on that map.
Currently, I am able to load the map once he clicks the submit from first drop down but all the options I tried to drop the pins are not working.
Here is the code I have achieved till now:
<?php
error_reporting(E_ALL);
ini_set('display_errors', '1');
require_once('auth.php');
include ('LoginConfig.php');
include ('FetchAgentDetails.php');
include ('FetchDeliveryDetails.php');
?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Delivery Management System</title>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyA0Rm5aK0BYu1f_TzhjkG97cchHHlQfrQY&sensor=false">
</script>
<style type="text/css">
html {height:100%}
body {height:100%;margin:0;padding:0}
#googleMap {height:100%}
</style>
<script>
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap")
,mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<style type="text/css">
<!--
.style1 {
font-size: 20px;
font-weight: bold;
}
-->
</style>
<style type="text/css">
table.collection {width:250px;border:2px solid black;border-style: outset;border-collapse:collapse;}
table.collection tr {background-color:#fff; border-bottom: 1px #99b solid;padding:10px;}
table.collection tr:hover {background-color:#ffe;}
table.collection td {display:table-cell;border-bottom: 1px #99b solid; padding:10px;}
table.collection td a {text-decoration:none; display:table-row; padding:0px; height:100%;}
</style>
</head>
<body bgcolor="#8E8E38"
<div style="clear: right;">
<p align="left" class="style1">Welcome Delivery Manager! </p>
<img style="position: absolute; top: 0; right: 0;" src="./Images/logo.jpg" alt="Company Logo" width="90" height="60" align="middle"></img>
</div>
<p align="left">Home</p>
<hr></hr>
<!-- START Main Wrap -->
<form method="post">
<fieldset>
<div style="clear: left;float:left;">
<label for="deliveryList">Delivery Items:</label>
<select name="deliveryList" id="deliveryList">
<option value="Select delivery item" selected="selected">Select delivery item</option>
<?php
$deliveryHandler = new FetchDeliveryDetails();
$itemNameArray = $deliveryHandler->getItemNames();
foreach ($itemNameArray as $innerArray) {
if (is_array($innerArray)) {
$value = $innerArray['itemName'];
echo "<option value=\"$value\"";
if (isset($_POST['deliveryList']) && $_POST['deliveryList'] == $value)
echo 'selected';
echo ">" . $value . "</option>\n";
}
}
?>
</select>
<input type="submit" name="submit" id="submit" value="Submit"/>
</div>
<div style="clear: right;float:right;">
<label for="agentList">Avaliable Agent:</label>
<select name="agentList" id="agentList">
<option value="" selected="selected">Select agent to assign</option>
<?php
$agentHandler = new FetchAgentDetails();
$agentNameArray = $agentHandler->getAgentNames();
foreach ($agentNameArray as $innerArray) {
if (is_array($innerArray)) {
$agentId = $innerArray['agentId'];
$firstNameValue = $innerArray['firstname'];
$lastNameValue = $innerArray['lastname'];
$fullName = $firstNameValue . ' ' . $lastNameValue;
echo "<option value=\"$agentId\">$fullName</option>\n";
}
}
?>
</select>
<input type="submit" name="agentSubmit" id="agentSubmit" value="Check Location"/>
</div>
</fieldset>
</form>
<?php
if (isset($_POST['deliveryList'])) {
$selectedItemName = $_POST['deliveryList'];
$deliveryHander = new FetchDeliveryDetails();
$itemDetailsArray = $deliveryHander->getAllDeliveryDetails($selectedItemName);
foreach ($itemDetailsArray as $valuesArray) {
$itemNameValue = $valuesArray['itemName'];
$itemDescriptionValue = $valuesArray['itemDescription'];
$ownerFirstname = $valuesArray['firstName'];
$ownerLastname = $valuesArray['lastName'];
$dateAdded = $valuesArray['dateAdded'];
$deliveryDate = $valuesArray['deliveryDate'];
$deliveryAddress = $valuesArray['deliveryAddress'];
$deliveryLatitude = $valuesArray['deliveryLatitude'];
$deliveryLongitude = $valuesArray['deliveryLongitude'];
$assignedAgent = $valuesArray['assignedAgentId'];
if ($assignedAgent == 0) {
$assignedAgent = "-";
}
echo "<table border=\"1\" align=\"left\" class =\"collection\">\n";
echo "<tr>\n";
echo "<td >Item Name:<b>$itemNameValue</td>\n";
echo "</tr>\n";
echo "<tr>\n";
echo "<td>Item Description: <b>$itemDescriptionValue</td>\n";
echo "</tr>\n";
echo "<tr>\n";
echo "<td>Owner Name: <b>$ownerFirstname $ownerLastname</td>\n";
echo "</tr>\n";
echo "<tr>\n";
echo "<td>Date Added: <b>$dateAdded</td>\n";
echo "</tr>\n";
echo "<tr>";
echo "<td>Delivery Date: <b>$deliveryDate</td>";
echo "</tr>";
echo "<tr>";
echo "<td>Delivery Address: <b>$deliveryAddress</td>";
echo "</tr>";
echo "<tr>";
echo "<td>Assigned Agent: <b>$assignedAgent</td>";
echo "</tr>";
echo "</table>";
echo "<div id=\"googleMap\" style=\"width:500px;height:380px;\"></div>";
}
}
if (isset($_POST['agentList'])) {
}
?>
</body>
</html>
I almost forgot, this is my first PHP application, in fact my first web application. So please go easy on me. Point out other errors also, but please stick to the question.
Ok got it working by using iframe :) and a bit of php
Reference:
http://www.youtube.com/watch?v=HTm-3Cduafw
echo "<iframe style =\"display: block;
width: 800px;
padding-top: 2px;
height: 400px;
margin: 0 auto;
border: 0;\" width=\"425\" height=\"350\" align=\"center\" frameborder=\"0\" scrolling=\"no\" marginheight=\"0\" marginwidth=\"0\"
src=\"https://maps.google.com/maps?f=d&source=s_d&saddr=$agent_map_url&
daddr=$map_url&hl=en&z=10&t=m&mra=ls&ie=UTF8&output=embed\"></iframe><br/>";
i want to replace all between <p> tags with a simple word NotFound
<p id='2'>
<?php
foreach ($d as $key=>$value)
{
extract($value);
if($key%4==0)
{
echo "</tr>";
echo"<tr>";
}
include('item.php');
}
echo"</table>";
echo"</div>";
?>
</p>
how can i do that using javaScript??
update:
i used that code in the javascript area:
<script type="text/javascript">
window.onload=msg;
function msg(){
document.getElementById('1').onclick=clickhandlee;
//
}
function clickhandlee(){
var ps = document.getElementsByTagName('p');
for(var i=0, max=ps.length; i<max; i++){
ps[i].innerHTML = "NotFound";
}
}
</script>
and the same previous code in the <body> tags
<p id='2'>
<?php
foreach ($d as $key=>$value)
{
extract($value);
if($key%4==0)
{
echo "</tr>";
echo"<tr>";
}
include('item.php');
}
echo"</table>";
echo"</div>";
?>
</p>
this is the included php template item.php
<td style='border: 0px none ; margin: 0px; padding: 0px; width: 240px;' align='right' valign='top'>
<div style='margin-bottom: 10px;'>
<table class='topic' border='0' cellpadding='0' cellspacing='0' align='right'>
<tbody>
<tr>
<td style='background: url('style/$style/images/top_background.jpg') no-repeat left center; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous' align='center' height='35'>
<div style='overflow: hidden; width: 230px;'>
<a class='link' href='t<?=$id;?>-<?=$name;?>.html'>
<?=$name;?> </a>
</div>
</td>
</tr>
<tr>
<td align='center' style="height: 197px">
<a href='count-<?=$id;?>;.html'>
<img src='<?=$photo;?>' class='image' border='0' width='220' height='170'/></a>
<div dir='rtl' class='shortdes'><?=$shortdes;?></div>
</td>
</tr>
<tr valign='top'>
<td style='background: url('style/$style/images/footer_background.jpg') no-repeat left center; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; height: 29px;' align='center' height='35'>
<a class='dlink' href='count-<?=$id;?>.html'>
<div class='download' style="height: 17px">
التحميل : <?=$visits;?>
</div></a>
</td>
</tr>
</tbody>
</table>
</div>
</td>
var paragraphs = document.getElementsByTagName('p'),
i = paragraphs.length;
while (i--)
{
paragraphs[i].innerHTML = 'NotFound';
}
Using Javascript:
var ps = document.getElementsByTagName('p');
for(var i=0, max=ps.length; i<max; i++)
ps[i].innerHTML = "NotFound";
Using Javascript
Note comment by user DA - IDs cannot start with a number before HTML 5, so assume that the ID is spelled out (two) instead of the numeral (2) if not using HTML 5.
If it is only for the <p> tag with id=two:
document.getElementById("two").innerHTML = "NotFound";
If it is for all <p> tags:
var paragraphs = document.getElementsByTagName("p");
for(var i = 0; i < paragraphs.length; i++) {
paragraphs[i].innerHTML = "NotFound";
}
The key is the innerHTML tag of the DOM elements.
If you're using jquery: $('p').html('NotFound');
<table border="0" cellspacing="0" cellpadding="0" >
<tr>
<?php
while ($pF = mysql_fetch_array($stringVisits)) {
?>
<td class="viewercell" style="color: #CCC; font-size: 10px;">
<?php
echo "<a href='profil.php?id=".$BuID."'>";
echo "<img style='margin-right: 5px; width: 61px; height: 80px;'";
if (checkStatus($BuID) == 1) {
echo 'class="onlineBorder" ';
} else {
echo 'class="image-xxsmall-border" ';
}
echo " src='images/profilePhoto/thumbs/";
if (!empty($getByProfile["photo_thumb"])) {
echo $getByProfile["photo_thumb"];
} else {
echo "noPhoto_thumb.jpg";
}
echo "'>";
?>
</a>
</td>
<?php } ?>
</tr>
</table>
This is what i have right now it displays the visiter´s profileimage. Now i would like to have their name under the image too.. but then i need to create another <tr> after this one, and add their name in each <td>. But how can i do that, if i have this while? Should i run another while, to get the names or can i do something smart with this?
Why not just stick the name in the same cell as the image? After you close the image tag, just echo $getByProfile["username"], or whatever?
<table border="0" cellspacing="0" cellpadding="0" >
<tr>
<?php
while($pF = mysql_fetch_array($stringVisits)){
?>
<td class="viewercell" style="color: #CCC; font-size: 10px;">
<?php
echo "<a href='profil.php?id=".$BuID."'>";
echo "<img style='margin-right: 5px; width: 61px; height: 80px;'";
if(checkStatus($BuID) == 1){
echo 'class="onlineBorder" ';
} else {
echo 'class="image-xxsmall-border" ';
}
echo " src='images/profilePhoto/thumbs/";
if(!empty($getByProfile["photo_thumb"])) { echo $getByProfile["photo_thumb"]; }else{
echo "noPhoto_thumb.jpg";
}
echo "'><br/>";
?>
</a>
<br/><?php echo $getByProfile['username']; ?>
</td>
<?php } ?>
</tr>
</table>
Here's a way to do it with minimal changes to your existing code:
<?php
<table border="0" cellspacing="0" cellpadding="0" >
<tr>
<?php
$names = array(); // ADDITION #1
while($pF = mysql_fetch_array($stringVisits)){
$names[] = // ADDITION #2 - ADD NEW USER NAME HERE;
?>
<td class="viewercell" style="color: #CCC; font-size: 10px;">
<?php
echo "<a href='profil.php?id=".$BuID."'>";
echo "<img style='margin-right: 5px; width: 61px; height: 80px;'";
if(checkStatus($BuID) == 1){
echo 'class="onlineBorder" ';
} else {
echo 'class="image-xxsmall-border" ';
}
echo " src='images/profilePhoto/thumbs/";
if(!empty($getByProfile["photo_thumb"])) { echo $getByProfile["photo_thumb"]; }else{
echo "noPhoto_thumb.jpg";
}
echo "'>";
?>
</a>
</td>
<?php }
// ADDITION #3:
echo "</tr>
<tr>";
foreach ($names as $username)
echo "<td class=\"username\"><p>$username</p></td>";
?>
</tr>
</table>
Also note that the way you had your code, the </tr> was inside the while loop.
this might not look nice but it should work why do you want 2 loops?
<?php
echo "<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\" >";
while($pF = mysql_fetch_array($stringVisits)){
echo "
<tr>
<td class="viewercell" style="color: #CCC; font-size: 10px;">
<a href='profil.php?id=".$BuID."'> <img /> </a>
</td>
</tr>
<tr><td> " . $getByProfile['username'] . " </td></tr>";
}
echo "</table>";
?>
I am populating the images from my database in a table, how to restrict the images to three per row?
<table border="0" align="center" height="25%" width="25%" >
<tr><td align="center" width="50px" bgcolor="#4b2d0e"><strong><font color="#FFFFFF">Friend List</font></strong></td></tr>
<? foreach($Selected as $row)
{
$value = $row['dPath'];
$imgp = base_url()."images"."/".$value;
?>
<tr><td bgcolor="#999999">
<strong ><?=$row['dFrindName'].'</br>';?></strong>
<? if($value!="") { ?>
<a class="Tab_Link" href="<? echo site_url();?>/friends/View_FProfile/<?=$row['dMember_Id']?>"><img src="<?=$imgp ?>" name="b1" width="90" height="80" border="0"/></a><br>
<? } else { ?>
<a class="Tab_Link" href="<? echo site_url();?>/friends/View_FProfile/<?=$row['dMember_Id']?>"><img src="../images/us.png" width="90px" height="80px"></a>
<? }?>
</td></tr>
<? }}?>
</table>
This is my table
<?php
$x=0;
foreach($Selected as $row){
if($x%3 == 0)
echo '<tr>';
$value = $row['dPath'];
$imgp = base_url()."images"."/".$value;
?>
<td style="background-color:#999999;">
<strong ><?=$row['dFrindName'].'</br>';?></strong>
<?php if($value!="") {?>
<a class="Tab_Link" href="<? echo site_url();?>/friends/View_FProfile/<?=$row['dMember_Id']?>"><img src="<?=$imgp ?>" name="b1" width="90" height="80" border="0"/></a><br>
<?php } else { ?>
<a class="Tab_Link" href="<? echo site_url();?>/friends/View_FProfile/<?=$row['dMember_Id']?>"><img src="../images/us.png" width="90px" height="80px"></a>
<?php }?>
</td>
<?php
if($x%3 == 0)
echo '</tr>';
x++;
}
if(($x-1)%3 != 0)
echo '</tr>'; //Prints out the last '<tr>' if one isn't printed.
?>
You need to use an if with a modulus operator.
Here, I cleaned up your invalid HTML, used CSS, and used a more recommended PHP coding style.
Please note: you need to be aware that if $Selected contains user-inputted (or otherwise non-HTML-safe) data, you need to wrap your output in htmlspecialchars or be open to XSS vulnerabilities.
It was a little unclear what you meant by wanting to "restrict the images to three per row" considering that it was only showing 1 per row currently. If I am to assume that you want to show 3 per row rather than 1, than you need to use the modulus operator and only open a new <tr> after every third element, and then close it at the right time. Like this:
<style type="text/css">
a img { border: none; }
.friend-list { border: none; width: 25%; height: 25%; margin: 0 auto; }
.friend-list th { text-align: center; background-color: #4b2d0e; color: #fff; font-weight: bold; }
.friend-list td { background-color: #999999; }
</style>
<?php
$numCols = 3;
$colCount = -1;
?>
<table class="friend-list">
<tr>
<th colspan="<?php echo $numCols; ?>">Friend List</th>
</tr>
<?php
foreach($Selected as $row) {
$value = $row['dPath'];
$imgp = ($value) ? base_url().'images/'.$value : '../images/us.png';
if(++$colCount % $numCols == 0) {
echo '<tr>';
}
?>
<td>
<strong><?php echo $row['dFriendName']; ?></strong><br />
<a class="Tab_Link" href="<?php echo site_url(); ?>/friends/View_FProfile/<?php echo $row['dMember_Id']; ?>">
<img src="<?php echo $imgp; ?>" width="90" height="80" />
</a>
</td>
<?php
if(($colCount + 1) % $numCols == 0) {
echo '</tr>';
} elseif (($colCount + 1) == count($Selected)) {
// if 16 elements are to fit in 3 columns, print 2 empty <td>s before closing <tr>
$extraTDs = $numCols - (($colCount + 1) % $numCols);
for ($i = 0; $i < $extraTDs; $i++) {
echo '<td> </td>';
}
echo '</tr>';
}
}
?>
</table>
Tables should be reserved for situations where columns and rows have meaning... A better solution is to use floated block elements instead of table cells. When you float a bunch of similar blocks, they wrap automatically, so the key is making their parent container just wide enough to hold 3 of them.
You don't need to do anything special with php to create new rows, so i'll just display the html and css, letting you write the php to make it happen.
html:
<div id="replacesTable">
<div class="replacesTableCell">
<div class="name">Name</div>
<img src="http://stackoverflow.com/favicon.ico" />
</div>
<div class="replacesTableCell">
<div class="name">Name</div>
<img src="http://stackoverflow.com/favicon.ico" />
</div>
<div class="replacesTableCell">
<div class="name">Name</div>
<img src="http://stackoverflow.com/favicon.ico" />
</div>
<div class="replacesTableCell">
<div class="name">Name</div>
<img src="http://stackoverflow.com/favicon.ico" />
</div>
<div class="clear"> </div>
</div>
css:
#replacesTable{
width: 300px;
}
div.replacesTableCell{
float:left;
width: 100px;
/* styles below are just to make it easier to see what's happening */
text-align:center;
font-size: 10px;
margin: 20px 0;
}
/* this just stretches the parent container #replacesTable around the entries*/
.clear{
clear:both;
height:1px;
overflow:hidden;
}
You can use CSS as an alernative if the images are of a fixed width and you can do without the tables - create a wrapper div with a fixed width around your entire image list, and simply float each image left.
Here is a simplified example without the extraneous styling information to show the principal. Every 3rd image we want to write the opening and closing tags (though not at the same time).
So we loop through the list of images and use the moduulus operator to know when we should print the <tr> tags.
<?php
$column_count = 3;
$image_list = get_images();
?>
<table>
<?php
for($i=0; $i < sizeof($image_list); i++) {
$cur_img = $image_list[$i];
$img_url = $cur_img['url'];
// open a we row every 3rd column
if($i % $column_count == 0) {
print '<tr>';
}
// for every image we want a table cell, and an image tag
print "<td> <img src='$img_url'> </td>";
// close the row every 3rd column, but offset by 3 from the opening tag
if($i % $column_count == $column_count - 1) {
print '<tr>';
}
}
// what if the number of images are not div by 3? Then there will be less
// than 3 items in the last row, and no closing tag. So we look for that and
// print a closing tag here if needed
if(sizeof($image_list) % $column_count != 0) {
print '</tr>';
}
?>
</table>
You can try using http://www.php.net/manual/en/function.array-chunk.php
Hey, would you try this.
Notice that I replaced the if...else with a ternary operator. I prefer it compact.
Hope it helps you and anyone else interested.:)
<table border="0" align="center" height="25%" width="25%" >
<tr>
<td colspan="3" align="center" width="50px" bgcolor="#4b2d0e">
<strong><font color="#FFFFFF">Friend List</font></strong>
</td>
</tr>
<?
$imgs=0;
foreach($Selected as $row){
$value = $row['dPath'];
$imgp = base_url()."images"."/".$value;
if($imgs%3 == 0){
echo '<tr>';
}
?>
<td bgcolor="#999999">
<strong ><?=$row['dFrindName'].'</br>';?></strong><a class="Tab_Link" href="<? echo site_url();?>/friends/View_FProfile/<?=$row['dMember_Id']?>"><img src="<?=$value!=""? $imgp: '../images/us.png' ?>" name="b1" width="90" height="80" border="0"/></a>
</td>
<?
$imgs++;
if($imgs%3 == 0){
echo "</tr>\n";
}
}//end loop
echo '</tr>';//end last row
?>
</table>