Question

I’m using hoverIntent to fire onMouseOver and onMouseOut events

it works for one of my li, actually it looks like it appends itself to only one li and as I hover other list items it displays the show() and hide() functions to the last list item.

here is my code:

            <script>
                $(document).ready(function(){
                        var config = {
                            over: show, // function = onMouseOver callback (REQUIRED)    
                            timeout: 200, // number = milliseconds delay before onMouseOut    
                            out: hide // function = onMouseOut callback (REQUIRED)    
                        };
                    $("#ULid li").hoverIntent( config )
                    $('a.names').click(function() {
                        var id = this.id.replace('id', '');
                        $.get("dependencies/ajax/contacts.ajax.php",{
                            cmd    : "view",
                            id   : id,
                        }, function(data) {
                            $("#detailsPane").fadeIn(500).html(data);
                        });
                    });
                    $('a.delete').click(function() {
                        var id = this.id.replace('id', '');
                        $.get("dependencies/ajax/contacts.ajax.php",{
                            cmd    : "view",
                            id   : id,
                        }, function(data) {
                            $("#contact-" + id).slideUp("slow").html(data);
                        });
                    });
                });
                function show(){
                    var selector = $(this).find('.delete-div');
                    selector.fadeIn('slow');
                }
                function hide(){
                    var selector = $(this).find('.delete-div');
                    selector.fadeOut(500);
                }
            </script>
            <div class="toolbar">
                <a href="javascript:void(0);" onclick='$("#addC").toggle();'><p id="addC20" style="float: left"></p></a>
                <p style="float: right; position: relative; top: 0px; left: -10px;">Contact Manager</p>
            </div><!-- end toolbar -->

            <div id="contact-wrap">
                <div id="groups">
                    <div id="contact-search" class="search">
                        <input type="text" class="input" name="search" />
                        <img src="dependencies/images/header/search.png" />
                    </div><!-- end search -->

                    <h3 id="groups-heading">Groups</h3>
                    <ul class="post">
                    <? while($row = mysql_fetch_array($groups)) {
                        echo '<li><a href="#" class="groups" id="' . $row['id'] . '">' . $row['first_name'] . ', ' . $row['last_name'] . '</a></li>';
                    } ?>
                        <li>Business</li>
                        <li>Personal</li>
                        <li><a href="#">Add group</a></li>
                    </ul><!-- end post -->
                </div><!-- end names -->

                <div id="names">
                    <h3 id="names-heading">Contacts</h3>
                    <ul class="post" id="ULid">
                    <? while($row = mysql_fetch_array($contacts)) { ?>
                        <li id="contact-<?=$row['id'];?>">
                            <p class="contact-image" style="float: left;"></p>
                            <span><a href="javascript:void(0);" class="names" id="<?=$row['id'];?>"><?=$row['first_name'];?>, <?=$row['last_name'];?></a></span>
                            <div class="delete-div" style="float: right; display: none;">
                                <a href="javascript:void(0);" class="delete" id="<?=$row['id'];?>">
                                    <p class="delete-image" style="float: left;"></p>
                                </a>
                            </div>
                        </li>
                    <? } ?>
                    </ul><!-- end post -->
                </div><!-- end names -->

                <div id="detailsPane"></div>

If I move the script outside the while loop then it show the delete div to the first list item and only to that one as I hover over to other list items.

Any ideas as to why it’s doing this?

Answer 1

hmmmm…. you really need some help there!

firstly, let’s do this outside the loop ,

<script>
$(document).ready(function(){
    var config = {  over: show,    
    timeout: 200,    
    out: hide    
    };
    $('#ULid li').hoverIntent( config );    

    $('a.names').click(function(){
        var id = this.id.replace('id','');
        $.get("dependencies/ajax/contacts.ajax.php",{
            cmd    : "view",
            id   : id,
    }, function(data) {                                      
               $("#detailsPane").fadeIn().html(data);
        });
    });

    $('a.delete').click(function() {

       var id = this.id.replace('id', '');
       var $this = $(this);

       $.get("dependencies/ajax/contacts.ajax.php",{
          cmd    : "delete",
          id   : id,
       }, function(data) {
          $this.closest('li').slideUp("slow").html(data);
       });
    });


});

function show(){ 
    var selector = $(this).find('.delete');
    selector.fadeIn('slow');
}
function hide(){ 
    var selector = $(this).find('.delete');
    selector.fadeOut('slow');
}
</script>

then your php

<ul id="ULid">
<? while($row = mysql_fetch_array($contacts)) { ?>

    <li id="contact-<?=$row['id'];?>">
        <p class="contact-image" style="float: left;"></p>
        <span><a href="#" class="names" id="id<?=$row['id'];?>"><?=$row['first_name'];?>, <?=$row['last_name'];?></a></span>
        <div class="delete" style="float: right; display: none;">
            <a href="javascript:void(0);" class="view"onclick='
                $.get("dependencies/ajax/contacts.ajax.php",{
                    cmd: "delete",
                    id: "<?=$row['id'];?>"
                }, function(data){
                $("contact-<?=$row['id'];?>").fadeOut(2000).html(data);
                });
            '>
            <p class="delete-image" style="float: left;"></p>
            </a>
        </div>
    </li>
<? } ?>
</ul>