New At This-Alternating Table Colors

  • (3 Pages)
  • +
  • 1
  • 2
  • 3

43 Replies - 3132 Views - Last Post: 12 March 2012 - 11:10 AM

#1 Xcalibre  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 43
  • Joined: 05-March 12

New At This-Alternating Table Colors

Posted 11 March 2012 - 02:17 AM

Hi All!

I have created a shoutbox to work with a social network site. The problem I have is that I'm trying to call the username, time, and the message from the database, and have it post into the shoutbox with alternating colors per odd, even posts.

I have been successful doing this, but the tables stretch based on who types the longest sentence, and it makes the usernames go to double lines instead of one line. Is there a way to define the tables so that they are set to a certain length? Below is the code I currently have.

<?php
require_once 'cn.php';
require_once 'protect.php';

$fiveMinutesAgo = time() - 600;

$sql = 'SELECT
	username, message_content, message_time
		FROM
	messages
		WHERE
	message_time > ' . $fiveMinutesAgo . '
		ORDER BY
	message_time';
$result = mysql_query($sql, $cn) or
	die(mysql_error($cn));


$color="1";

echo '<table width="100%" border="1" align="center" cellpadding="2" cellspacing="0">';
while($rows=mysql_fetch_array($result)){
$hoursAndMinutes = date('g:ia', $row['message_time']);


if($color==1){
echo "<tr bgcolor='#CCCCFF'>
<td>".$rows['username']."</td><td>".$hoursAndMinutes."</td><td>".$rows['message_content']."</td>
</tr>";

$color="2";
}


else {
echo "<tr bgcolor='#DFDFDF'>
<td>".$rows['username']."</td><td>".$hoursAndMinutes."</td><td>".$rows['message_content']."</td>
</tr>";


$color="1";
}

}
echo '</table>';
mysql_close();
?>


Thank you for any assistance you can give me.

X

Oh, and I forgot to add that the above code gives the time format at 2:00 AM every post. The time never changes. I haven't figured that out either.

Thanks again for any help you can offer. It's driving me mad. :(

Is This A Good Question/Topic? 0
  • +

Replies To: New At This-Alternating Table Colors

#2 e_i_pi  Icon User is offline

  • = -1
  • member icon

Reputation: 879
  • View blog
  • Posts: 1,893
  • Joined: 30-January 09

Re: New At This-Alternating Table Colors

Posted 11 March 2012 - 02:43 AM

I've spotted a few problems with your code.

Firstly, your "five minutes ago" should be this:
$fiveMinutesAgo = time() - 300;



Also, your while loop should be this:
while($row = mysql_fetch_array($result)) {


You've written $rows in the declaration of the loop, and $row inside the loop. The variable name needs to be the same.

Now, to get alternating row colours, there's a few methods, but here's one. When you get into the while loop, have a boolean variable that determines the colour of the outputted row (e.g. - true for red, false for orange). Then just switch the value of the boolean to it's opposite each recurse of the loop. That way, the boolean value will alternate each row, enabling alternating colours.
Was This Post Helpful? 1
  • +
  • -

#3 Xcalibre  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 43
  • Joined: 05-March 12

Re: New At This-Alternating Table Colors

Posted 11 March 2012 - 02:57 AM

View Poste_i_pi, on 11 March 2012 - 02:43 AM, said:

I've spotted a few problems with your code.

Firstly, your "five minutes ago" should be this:
$fiveMinutesAgo = time() - 300;



Also, your while loop should be this:
while($row = mysql_fetch_array($result)) {


You've written $rows in the declaration of the loop, and $row inside the loop. The variable name needs to be the same.

Now, to get alternating row colours, there's a few methods, but here's one. When you get into the while loop, have a boolean variable that determines the colour of the outputted row (e.g. - true for red, false for orange). Then just switch the value of the boolean to it's opposite each recurse of the loop. That way, the boolean value will alternate each row, enabling alternating colours.


Thank you for u're reply. I'll change the first two as requested. I do have alternating colors from the code above..it's the actual tables that stretch in the shoutbox that is the problem now.

If someone typed a LONG sentence, then the width of the fields change in the shoutbox....they are not static.

Kind of an example would be this:

Someone types in a long message......would look like this...

Name...time...meeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeesage

But if it's a short message, it looks like this...

Name...........................................time......................................Meeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeesage

The rows stretch based on the longest message. I need them to remain the same throughout the shoutbox if there's a way to do that. Thanks again.
Was This Post Helpful? 0
  • +
  • -

#4 e_i_pi  Icon User is offline

  • = -1
  • member icon

Reputation: 879
  • View blog
  • Posts: 1,893
  • Joined: 30-January 09

Re: New At This-Alternating Table Colors

Posted 11 March 2012 - 03:12 AM

If you set the width of the container of the shoutbox, then set the table width to 100%, that way the table is constrained to your declared container width. You can do this inline, or in a CSS file.
Was This Post Helpful? 1
  • +
  • -

#5 Xcalibre  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 43
  • Joined: 05-March 12

Re: New At This-Alternating Table Colors

Posted 11 March 2012 - 12:11 PM

View Poste_i_pi, on 11 March 2012 - 03:12 AM, said:

If you set the width of the container of the shoutbox, then set the table width to 100%, that way the table is constrained to your declared container width. You can do this inline, or in a CSS file.


The width of the shoutbox container is already set to 100%. In the above code, the table is set at 100% already as well. So I'm not sure where I'm supposed to make any changes. Here are three examples of what is happening as of now.

Example 1:

Notice that the messages are spread out throughout the shoutbox...

Posted Image

Example 2:

Notice that the rows change if someone types a longer sentence in the shoutbox:

Posted Image

Example 3:

Notice how the last comment stretches the height of the row and stretches the username to be in the center of the message.

Posted Image

So the shoutbox message positioning is always changing based on the length of the message that is written into the shoutbox. I need to make this stay in one position, but can't figure it out. The width of the shoutbox container is at 100%, and the code above has this table at 100%. I'm at a loss here.

Thanks again for any further advice. Also, the time works out now that I have changed the row and rows names. Thank you very much. Didn't notice that :D
Was This Post Helpful? 0
  • +
  • -

#6 Xcalibre  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 43
  • Joined: 05-March 12

Re: New At This-Alternating Table Colors

Posted 11 March 2012 - 12:19 PM

Also notice that the username....time....and message....are all scrunched together with no spacing between them to set them apart.
Was This Post Helpful? 0
  • +
  • -

#7 JackOfAllTrades  Icon User is offline

  • Saucy!
  • member icon

Reputation: 6246
  • View blog
  • Posts: 24,014
  • Joined: 23-August 08

Re: New At This-Alternating Table Colors

Posted 11 March 2012 - 12:26 PM

This is NOT a database question. I believe this to now be an HTML/CSS question, so I will move this there.
Was This Post Helpful? 0
  • +
  • -

#8 Xcalibre  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 43
  • Joined: 05-March 12

Re: New At This-Alternating Table Colors

Posted 11 March 2012 - 12:40 PM

View PostJackOfAllTrades, on 11 March 2012 - 12:26 PM, said:

This is NOT a database question. I believe this to now be an HTML/CSS question, so I will move this there.


Okay...no worries.. I thought it was, as it's pulling information from the mysql database and placing it into a shoutbox. I had no clue what it would be under, since it's associated with a database. Sorry if I posted in wrong forum.
Was This Post Helpful? 0
  • +
  • -

#9 e_i_pi  Icon User is offline

  • = -1
  • member icon

Reputation: 879
  • View blog
  • Posts: 1,893
  • Joined: 30-January 09

Re: New At This-Alternating Table Colors

Posted 11 March 2012 - 02:25 PM

Just set the min-width of the <tr> elements using CSS. Here's the W3Schools page on min-width.
Was This Post Helpful? 1
  • +
  • -

#10 Xcalibre  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 43
  • Joined: 05-March 12

Re: New At This-Alternating Table Colors

Posted 11 March 2012 - 02:50 PM

View Poste_i_pi, on 11 March 2012 - 02:25 PM, said:

Just set the min-width of the <tr> elements using CSS. Here's the W3Schools page on min-width.


Thank you! Okay...I've tried these two changes:

echo '<tr bgcolor="#CCCCFF">';
echo '<td { min-width: 100px; }>' .$rows['username'] . '</td>';
echo '<td { min-width: 100px; }>' .$hoursAndMinutes . '</td>';
echo '<td { min-width: 100px; }>' .$rows['message_content'] . '</td>';
echo '</tr>';



echo '<tr bgcolor="#CCCCFF">';
echo '<td min-width:150px >' .$rows['username'] . '</td>';
echo '<td min-width:150px >' .$hoursAndMinutes . '</td>';
echo '<td min-width:150px >' .$rows['message_content'] . '</td>';
echo '</tr>';


It doesn't work. Sorry I'm so difficult. :( As I said, I'm fairly new to a lot of coding. I know some basics, but not that smart on it. Thanks again.
Was This Post Helpful? 0
  • +
  • -

#11 Xcalibre  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 43
  • Joined: 05-March 12

Re: New At This-Alternating Table Colors

Posted 11 March 2012 - 03:00 PM

Okay...maybe I'm not explaining everything correctly. I have created a shoutbox, and this is the space where the information from the comments are posted:

</div>
<div class="main">
</div>


Then I call the username, time, and message content from the database and it goes into the "main" area div listed above.

I hope this will help some.
Was This Post Helpful? 0
  • +
  • -

#12 e_i_pi  Icon User is offline

  • = -1
  • member icon

Reputation: 879
  • View blog
  • Posts: 1,893
  • Joined: 30-January 09

Re: New At This-Alternating Table Colors

Posted 11 March 2012 - 03:23 PM

You really should be doing all styling in a CSS file. There are a lot of resources in the net for CSS (Cascading Style Sheets), and I suggest you read up on them.

You can do it inline like this:
echo '<td style="min-width:150px">' .$rows['username'] . '</td>';



But you are better off doing something like this in CSS, using descendant selectors:
#myTable
{
  width: 100%;
  border: 1;
  align: center;
  cellpadding: 2;
  cellspacing: 0;
}

#myTable td
{
  min-width: 150px;
}


Then, instead of having all that inline styling everywhere, you can just have this for line 21 of your original code:
echo '<table id="myTable">';


...and this for your td elements...
echo '<td>' .$rows['username'] . '</td>';
echo '<td>' .$hoursAndMinutes . '</td>';
echo '<td>' .$rows['message_content'] . '</td>';



This way, everything is much easier to read, and you've successfuly separated style from content. You can even make the alternating row colours CSS-dependant, by using classes. An example of how to do this is explained here.
Was This Post Helpful? 1
  • +
  • -

#13 Xcalibre  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 43
  • Joined: 05-March 12

Re: New At This-Alternating Table Colors

Posted 11 March 2012 - 03:34 PM

I'll check the first example you gave. I've tried to name each <td> with an ID so that I can use CSS for each <td> as there are three of them, and I need them all different. But it is not working.

Name area needs to be about 20px

time only needs to be long enough for the time in pixels and that's it...

Comment area needs to be the rest of the remaining pixels left in the shoutbox after the name and time.

So the first one would seem easier if it works for me. I'll make so me changes and let you know. Thank you.
Was This Post Helpful? 0
  • +
  • -

#14 Xcalibre  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 43
  • Joined: 05-March 12

Re: New At This-Alternating Table Colors

Posted 11 March 2012 - 04:07 PM

YAY! U're awesome m8.......

Only one problem left... Well, really two, but don't think I can do anything about the second one. But here's one issue.

When a user types in a long message, you can see how the message row widens. It should just go to the next line without the row widening and the username being centered in the row the way it is.

Posted Image

Notice the last comment in the shoutbox? It widens the row and makes the username center in that widened row. I would like it just to go to the next row without it widening. Anyway to fix that?

Thank you so very much :bananaman:
Was This Post Helpful? 0
  • +
  • -

#15 e_i_pi  Icon User is offline

  • = -1
  • member icon

Reputation: 879
  • View blog
  • Posts: 1,893
  • Joined: 30-January 09

Re: New At This-Alternating Table Colors

Posted 11 March 2012 - 04:15 PM

In your CSS for the table, create the attribute vertical-align and set it to "top", like this:
#myTable
{
  // all your other attributes here
  vertical-align: top;
}


I'm not sure what the problem is with the message area though. If you need a maximum width, you can use the attribute max-width to constrain it. If you need alternating row colours when there are messages which go over multiple lines, that will be a fair amount trickier, and may involve some Javascript. It can be done, but it's not bread and butter stuff.
Was This Post Helpful? 0
  • +
  • -

  • (3 Pages)
  • +
  • 1
  • 2
  • 3