Question

So, the code i will give you is terrible…i tried to figure it out, but javascript seems to be unlearnable to me.

I have a dynamically generated unordered list. When the user hovers over each list item, I would like to display more information in a separate div.

heres what I have html/php wise:

<div id="inv">
<ul>
<?php 
$i = 1;
foreach ($inv as $item) {
    echo "<li class='inventory' id='$i'>";
    echo $item['name'] . "<input type=button value='destroy'></input> ";
    echo "</li>";
    $i ++;
}
?>
</ul>
</div>
<?php 
$i = 1;
foreach ($inv as $item) {
echo "<div class='inventory_display' id='$i'>".$item['name']."</div>";
$i ++;
}

CSS:

#inventory ul {
    list-style: none;
}
#inventory li {
    background-color: #B3B4BD;
    color: white;
}

#inventory li:hover {
    background-color: #9bc2d0;
    color: black;
    cursor: pointer;
}

#inventory {
    float:left;
    width: 500px;
}

#inventory_display {
    display: none;
    margin-left: 420px;
    position: absolute;
    width: 300px;
    height: 300px;
    background-color: #97cae6;
}

I assume I need javascript, but really have no idea where to start. Pasting what I have would probably only cause more confusion.

I’d be happy with a simple hover display to appear, but will probably seek to make hover display it, and a click make it static.

Thanks. please let me know if any more information is required! If its too much trouble for a full answer, any place to start, like links, etc would be helpful too.

Thanks!

Answer 1

move $item['name'] into the rel attribute of the li.

echo "<li class='inventory' id='$i' rel="$item['name']">";

Now, we can use jQuery to append an element to it, and display the rel inside of that div.

CSS needs to change, as well

#inventory li{
  background-color: #B3B4BD;
  color: white;
  /* Add this */
  position:relative;
}

new Class.

.li-tooltip{
  position:absolute;
  top:0;
  /* other css stuff, we'll do the width and height later. */
}

Let’s use jQuery now to do some beautiful stuff.

$('#inventory li').hover(function(){
  //this is the "mouse in"
  // find the width of the LI, so we can use that to decide positioning.
   var liW = $(this).width();
  $('<div class="li-tooltip">'+$(this).attr('rel')+'</div>').css('left', liW).appendTo($(this));
}, function(){
  //this is the "mouseout"
  $('.li-tooltip').remove();
});

Here is the working jsFiddle