I have a MySQL output-script on my website:
$db_projects = "rex_projects";
$sql = new rex_sql;
$sql->debugsql = 0; //Ausgabe Query
$sql->setQuery("SELECT * FROM $db_projects ORDER BY id");
for($i=0; $i < $sql->getRows(); $i++)
{
$id = $sql->getValue("id");
$projectname = $sql->getValue("projectname");
$projectnumber = $sql->getValue("projectnumber");
$print_projects .= '<div id="'.$id.'">'.$projectname.' has the number '.$projectnumber.'';
$sql->next();
}
Every database-element is displayed in a div with the formatting above.
What I would like to implement:
If I'm hovering a div, another div (code below) should display the specific datasets for this element. Is this possible and which is the easiest to do that?
<div id="specific-informations">
Projectname: <?php echo $projectname ?><br>
Projectnumber: <?php echo $projectnumber ?>
</div>
Try Adding below Script:
$(document).ready(function(){$( "#specific-informations" ).hide();
});
$( "#getinfo" ).mouseover(function() {
$( "#specific-informations" ).fadeIn(2000);
});
$( "#getinfo" ).mouseout(function() {
$( "#specific-informations" ).fadeOut(2000);
});
You can do something like :
Create your second div in $print_projects
$print_projects .= <<<HTML
<div id="$id" class="project">
$projectname has the number $projectnumber
<div class="specific-informations">
Projectname: $projectname<br>
Projectnumber: $projectnumber
</div>
</div>
HTML;
And in your CSS
.specific-informations { display: none; }
.project:hover .specific-informations { display: block }
You can call an ajax function and return the results.Then bind the corresponding ajax data in div.