PHP and Javascript

[Akenatehm]

Hey Guys,

 

I have a little script here running. The javascript part is a rollover that changes the CSS class on hover of the <div> element. The div element and its contents are given from a PHP loop which displays news entries inside the main div.

 

The Javscript is:

<script type="text/javascript">
function mouseOver()
{
document.getElementById('entry').className = "hoverentry";
}
function mouseOut()
{
document.getElementById('entry').className = "normalentry";
}
</script>

 

The PHP is:

$connect = mysql_connect($host,$user,$pass) or die(mysql_error());
$selectdatabase = mysql_select_db($db) or die(mysql_error());

$getentries = mysql_query("SELECT * FROM newsentries ORDER BY id DESC ");

while($filterentries = mysql_fetch_assoc($getentries))
{
$title = $filterentries['title'];
$content = $filterentries['content'];
$author = $filterentries['author'];
$date = $filterentries['date'];

echo '<div id="entry" class="normalentry" onMouseOver="mouseOver()" onMouseOut="mouseOut()">';
echo '<h3 class="newsentry">' . "$title  " . "</h3>";
echo '<p class="newsdate">' . "$date"  . "</p> <br />";
echo '<p class="newsentry">' .  "$content" . '</p>';
echo '<p class="newsposter">Posted By ' . "$author" . "</p> </div>";
}

 

and the CSS is:(I dont think you need it but just in case.)

div.normalentry{
margin-top: 10px;
margin-bottom: 10px;
background-color: #2a2a2a;
background-image: url('scanline.png');
width:570px;
}

div.hoverentry{
margin-top: 10px;
margin-bottom: 10px;
background-color: #111111;
background-image: url('scanline.png');
width:570px;
}

h3.newsentry{
color: white;
font-size:24;
padding:15px 10px 2px 10px;
font-family: sans-serif;
}
p.newsdate{
color:white;
font-size:12;
display: inline;
padding: 3px 0px 0px 25px;
}
p.newsentry{
color: #959292;
padding: 15px 10px 10px 10px;
}
p.newsposter{
color:white;
font-size: 14;
padding-left: 12px;
padding-top: 5px;
padding-bottom: 15px;
}

 

When I hover over any of the news entries, the same one div at the top changes (in its rollover effect). What I want, is a way for each one to change its own, and not eachothers.

 

Help would be appreciated.

[shlumph]

You're assigning all the div's the same ID!!  They need to be different

 

<script type="text/javascript">
function mouseOver(id)
{
document.getElementById('entry'+id).className = "hoverentry";
}
function mouseOut(id)
{
document.getElementById('entry'+id).className = "normalentry";
}
</script>

<?php
$i = 0;
while($filterentries = mysql_fetch_assoc($getentries))
{
$i++
$title = $filterentries['title'];
$content = $filterentries['content'];
$author = $filterentries['author'];
$date = $filterentries['date'];

echo '<div id="entry'+$i+'" class="normalentry" onMouseOver="mouseOver('+$i+')" onMouseOut="mouseOut('+$i+')">';
echo '<h3 class="newsentry">' . "$title  " . "</h3>";
echo '<p class="newsdate">' . "$date"  . "</p> <br />";
echo '<p class="newsentry">' .  "$content" . '</p>';
echo '<p class="newsposter">Posted By ' . "$author" . "</p> </div>";
}

 

But, a better thing to do would be just to handle this in the CSS using pseudo:

div.normalentry{
margin-top: 10px;
margin-bottom: 10px;
background-color: #2a2a2a;
background-image: url('scanline.png');
width:570px;
}

div.normalentry:hover{
margin-top: 10px;
margin-bottom: 10px;
background-color: #111111;
background-image: url('scanline.png');
width:570px;
}

 

And please, try and format your code before posting on here  Other than that, let me know if either of these solutions work for you. The CSS one is the way to go IMHO. Also, remember that ID's on the same page are unique identifiers, and should only be used once on a single page.

 

[Akenatehm]

I knew that I was assigning them to the same ID. I just didnt know how else to do it.

 

So, i changed using the CSS. Now, there is no hover effect.

 

How can i fix this?

[shlumph]

Try this (if they all have the same ID still):

#entry.normalentry{
margin-top: 10px;
margin-bottom: 10px;
background-color: #2a2a2a;
background-image: url('scanline.png');
width:570px;
}

#entry.normalentry:hover{
margin-top: 10px;
margin-bottom: 10px;
background-color: #111111;
background-image: url('scanline.png');
width:570px;
}

 

If this doesn't work, then still try playing with the CSS. You may need to have the first ID outside of #entry before the .normalentry.......

 

[Akenatehm]

OK I tried that. Now The background is white, on hover over goes to the right colour.

 

Also, When i hover over, it like shakes the page and moves everything a few pixels left or right.

 

Any ideas?

[Akenatehm]

Any ideas guys?

[shlumph]

Play around with the CSS so that the margin/padding is the same, dude 

[Akenatehm]

they are the same and shouldnt for any reason change.

[shlumph]

The computer's also right, man. Is the font size changing? Width? Something besides the background is changing. Figure out what it is in the CSS and fix it!

[Akenatehm]

I've given up on the CSS way, surely i can do it through PHP and JAvascript.