4 replies to this topic

[Mr Data]

Hello

I am currently developing a PM system for my CMS and I thought I would include jQuery too make the inbox page a little more "cool"

I can't show you how it works live so I uploaded some pictures of it.

In closed.jpg you can see how it looks like when the user hasn't opened a message yet. When the user clicks "Mikey", the message should slide down but insted, every message slides down from every user.
I know what the poblem is but I don't know how to fix it, I'm not that good at jQuery, yet:)

I guess you have to pass on the ID of person to jQuery so that the right message slides down, but I don't know how:)

jQuery

 
 $(".from_user").click(function(){
		 $(".show_pm").slideToggle("slow");
	 })

PHP & HTML

	 
	 <div id="table">
				 <table width="700" border="0" cellpadding="10" cellspacing="0" id="inkorg_table">
					 <tr>
						 <td><strong>Från:</strong></td>
						 <td><strong>Ämne:</strong></td>
						 <td><strong>Radera:</strong></td>
					 </tr>
					 ';
					 
						 $inkorg = mysql_query("SELECT * FROM pm WHERE pm.to_user='".$_SESSION['username']."' AND pm.deleted=0  ORDER BY ID DESC") or mysqlError();
						 
						 while($row = mysql_fetch_array($inkorg)){
						 print '
						 <tr '.is_pm_new($row['id']).'>
 
					  // When the user clicks this link, the message from this person should slide down
						 <td><a href="#" class="from_user">'.$row['from_user'].'</a></td>
   
						 <td>'.protect($row['subject']).'</td>
 
						 <td><a href="index.php?page=pm&inkorg&move_trash='.$row['id'].'"><img src="img/remove.png" width="16" height="16" alt="remove" /></a></td>
   
						 </tr>
 
					 // This is where the message begins
						 <tr class="show_pm">
 
						 <td colspan="3">';
 
						 // Get msg
						 print '<div id="inkorg">
   
						 <p><strong>Från:</strong> '.$row['from_user'].'</p>
						 <p><strong>Till:</strong> '.$row['to_user'].'</p>
   
						 <p><strong>Datum:</strong> '.$row['sent_at'].'</p>
						 <p><strong>Ämne:</strong> '.protect($row['subject']).'</p>
						 
	 
						 <p>'.nl2br($row['body']).'</p>
									  
									 }								
								 }
		  
						 print '</div>
						 </div>
						 </div>';
						 
	 
						 print '</td>
						 </tr>';
	 
						 }// End while-loop				
				 print '
			 </table>
				 </div>
				 
	 ';

I removed a little bit of code that you don't need, so if you notice too many </divs>, don't worry about them.

Thanks:P

Attached Files

•  open.jpg   61.91K   22 downloads
•  closed.jpg   30.62K   20 downloads

[rc69]

$(".from_user").click(function(){
		 $(this).closest("tr").next("tr").slideToggle("slow");
	 })

That should do it for you.

It finds the closest parent of the link that is a <tr> tag, then gets the next <tr> tag and shows it. I'm assuming (based on the code you provided), that the next <tr> is what you want shown.

[Mr Data]

rc69, on Nov 18 2009, 11:39 AM, said:

$(".from_user").click(function(){
			$(this).closest("tr").next("tr").slideToggle("slow");
		})

That should do it for you.

It finds the closest parent of the link that is a <tr> tag, then gets the next <tr> tag and shows it. I'm assuming (based on the code you provided), that the next <tr> is what you want shown.

It worked, thank you very much:D

I just relized that my table changes in width when you click "Mikey" and when you click it again it changes back to original state. The whole animation looks like crap, it doesn't slide down with a nice animation.
If you don't know what I mean, look at the pictures I uploaded.

Do you know how to fix that? When you click "Mikey", the yellow row stays as it is(look at closed.jpg) without changing in width and the message slides down with a nice animation.

[rc69]

I know that can be an issue with tables. The best solution i can offer is to specify a width on the header cells (33% should be approx. close to default for a 3 column table). If that doesn't work then i can't think of anything else that will.

[Mr Data]

rc69, on Nov 18 2009, 10:05 PM, said:

I know that can be an issue with tables. The best solution i can offer is to specify a width on the header cells (33% should be approx. close to default for a 3 column table). If that doesn't work then i can't think of anything else that will.

Okey, thanks for the help though