JQuery Manipulate Div - Not working.

[Coly010]

Ok, so I'm trying to use JQuery to change the background color and the font style for a div I have. The problem is that there are multiple divs with the same id, created from an array.

The array is pulled from the database.

Here is the PHP code which creates my divs:

while($f_ar = mysqli_fetch_array($f_sql))
	{

		if( $f_ar['user2_id'] == $userid )
		{
			$fr_id = $f_ar['user1_id'];
		}
		else if( $f_ar['user1_id'] == $userid )
		{
			$fr_id = $f_ar['user2_id'];
		}

		$sfu_sql = $db->query("SELECT * FROM users WHERE userid = '$fr_id'");
		$sfu_ar = mysqli_fetch_array($sfu_sql);

		$f_dname = $sfu_ar['display_name'];
		$f_dpic = $sfu_ar['display_pic'];
		$f_status = $sfu_ar['status'];
		$f_pm = $sfu_ar['personal_message'];

		echo "<tr>
				<td>
				<a href='viewuser.php?id=" . $fr_id . "'>
					<div id='friend_list_idv'>
					<table width='50%'>
						<tr>
							<td width='40%'>
								" . $f_dpic . "
							</td>
							<td width='60%'>
								<p id='friend_details'>" . $f_dname . "<br />
							<font size='2px'>
								" . $f_status . "<br />
								" . $f_pm . "</font></p>
							</td>
						</tr>
					</table>
					</div>
				</a>
			</td>
		</tr>";

	}

 

The div in question is #friend_list_idv

And now my jquery file is simply:

 

$(document).ready(function()
{

$("#friend_list_idv").hover(function()
{
	$(this).addClass("fli_hover");
	$("#friend_details").addClass("fd_hover");
}, function()
{
	$(this).removeClass("fli_hover");
	$("#friend_details").removeClass("fd_hover");
});

});

 

and finally my css classes are:

[CSS]

#friend_list_idv {

border-width: 2px;

border-style: groove;

border-color: #282828;

}

.fli_hover {

background-color: #505050;

}

#friend_details {

color: #C0C0C0;

text-decoration: none;

}

.fd_hover {

font-style: italic;

}

[/CSS]

When you hover over the first div, voila, it works, when you hover over the second one, it doesn't.

Here are some screenshots of my problem:

[ATTACH=CONFIG]1087[/ATTACH]

[ATTACH=CONFIG]1088[/ATTACH]

[ATTACH=CONFIG]1089[/ATTACH]

I know that you cannot see the mouse cursor, but if you look at the bottom of the last two screenshots you will see a change between viewuser.php?id=2 and viewuser.php?id=3

Any help would be extremely appreciated.

[Djkanna]

Replace "friend_list_idv" with a class of "friend_list_idv" rather than an id, do the same in the html,css,js.

[Coly010]

Thanks a lot, worked perfectly :)

[SRB]

And then read this: http://ryanfait.com/articles/the-difference-between-ids-and-classes/

And any other "Difference between class and ID in html" result from Google you wish to.

[Djkanna]

You'll want to do the same with friend_details, and change up the hover a little bit.

$('.friend_list_idv').hover ( function () {
   var con = $(this);

   con.addClass('fli_hover');
   $('.friend_details', con ).addClass('fd_hover');
}, function () {
   $(this).removeClass('fli_hover');
   $('.friend_details').removeClass('fd_hover');
});

[Coly010]

Well that worked fine. But now I have another problem which is somewhat related.

I have an image of an arrow, and its on a div created by an array. Here's my file, should be easy enough to understand what's going on in it.

$fr_sql = $db->query("SELECT * FROM friends WHERE (user1_id = '$userid') OR (user2_id = '$userid')");

while( $fr_ar = mysqli_fetch_array($fr_sql))
{

if( $fr_ar['user2_id'] == $userid )
{
	$fr_id = $fr_ar['user1_id'];
}
else if( $fr_ar['user1_id'] == $userid )
{
	$fr_id = $fr_ar['user2_id'];
}

$fd_sql = $db->query("SELECT * FROM users WHERE userid = '$fr_id'");
$fd_ar = mysqli_fetch_array($fd_sql);

$fdname = $fd_ar['display_name'];
$fdpic = $fd_ar['display_pic'];

$ru_sql = $db->query("SELECT * FROM recent_updates WHERE userid = '$fr_id' ORDER BY ru_id DESC LIMIT 5");
$ru_nr = mysqli_num_rows($ru_sql);
if( $ru_nr > 1 )
{
	echo "<div class='update'>
		<table width='100%'>
			<tr>
				<td width='30%'>
					" . $fdpic . "
				</td>
				<td width='50%'>
					" . $fdname . " has changed some of their details.
				</td>
				<td width='20%'>
					<img src='img/dropdown_arrow.png' class='dd_arrow' />
					<img src='img/up_arrow.png' class='up_arrow' />
				</td>
			</tr>
		</table>
	</div>
	<div class='dropdown_news'>";
	while( $ru_ar = mysqli_fetch_array($ru_sql))
	{

		$type = $ru_ar['type'];
		$time = $ru_ar['time'];
		$old_value = $ru_ar['old_value'];
		$new_value = $ru_ar['new_value'];
			if( $type == 1 )
			{
				echo "<div class='dropdown_news_item'>

					<table width='100%'>
						<tr>
							<td width='30%'>
								<center>
								" . $fdpic . "
								</center>
							</td>
							<td width='50%'>
								" . $old_value . " has changed their display name to: <b>" . $new_value . "</b>
							</td>
							<td width='20%'>
								" . $time . "
							</td>
						</tr>
					</table>

				</div>";
			}

			else if( $type == 2 )
			{
				echo "<div class='dropdown_news_item'>

					<table width='100%'>
						<tr>
							<td width='30%'>
								<center>
								" . $fdpic . "
								</center>
							</td>
							<td width='50%'>
								" . $fdname . " has changed their status from: <b>" . $old_value . "</b> to: <b>" . $new_value . "</b>
							</td>
							<td width='20%'>
								" . $time . "
							</td>
						</tr>
					</table>

				</div>";
			}
			else if( $type == 3 )
			{
				echo "<div class='dropdown_news_item'>

					<table width='100%'>
						<tr>
							<td width='30%'>
								<center>
								" . $fdpic . "
								</center>
							</td>
							<td width='50%'>
								" . $fdname . "<br />
								" . $new_value . "
							</td>
							<td width='20%'>
								" . $time . "
							</td>
						</tr>
					</table>

				</div>";
			}
			else if( $type == 4 )
			{
				echo "<div class='dropdown_news_item'>

					<table width='100%'>
						<tr>
							<td width='30%'>
								<center>
								" . $new_value . "
								</center>
							</td>
							<td width='50%'>
								" . $fdname . " had changed their display picture.
							</td>
							<td width='20%'>
								" . $time . "
							</td>
						</tr>
					</table>

				</div>";
			}

	}
	echo "</div>";

 

Now i want it that when you click the arrow it will slideDown() the dropdown_news div relative to the div where the arrow is clicked. as you can probably see its possible for more than one arrow to be on the screen, and in that sense i cant use an id i need a class, and there can also be more than one div with the class dropdown_news.

When i click the arrow, obviously, all the divs with the class dropdown_news slideDown().

here is my jquery:

// Drop down arrow

$(".dropdown_news").hide();
$(".up_arrow").hide();

$(".dd_arrow").hover(function()
{
	this.src = 'img/dropdown_arrow_over.png';
}, function()
{
	this.src = 'img/dropdown_arrow.png';
});

$(".dd_arrow").click(function()
{
	$(".dropdown_news").slideDown();
	$(this).hide();
	$(".up_arrow").show();
});

// Up arrow

$(".up_arrow").hover(function()
{
	this.src = 'img/up_arrow_over.png';
}, function()
{
	this.src = 'img/up_arrow.png';
});

$(".up_arrow").click(function()
{
	$(".dropdown_news").slideUp();
	$(this).hide();
	$(".dd_arrow").show();
});

 

I don't know how to tackle this problem :/ any help would be appreciated.

Edited July 29, 2013 by Coly010
Shortened the php file to the necessary part