[oha055]

Hi!

Please excuse the bad title of this post. I have made a function in jQuery that allows the user to hover a certain element (in this case a small image within a row on a scoreboard). Here is the code:

    function showComment() {
        
        // Introduce short variables
        $commImg    = $('img.comment-img');
        $comment    = $('.comment');
        
        // On mouse-over...
        $commImg.mouseover(function() {
            $commImg.mousemove(function(e) {
                $comment.css('left', e.pageX + 15);
                $comment.css('top', e.pageY + 15);
                $comment.show();
            });
        });
        $commImg.mouseout(function() {
            $comment.hide();
        });
    }

It works pretty well, however, ALL of the <div class="comment">s are showing (stacked on top of eachother) when hovering any of the images on the scoreboard. I want just one specific DIV to show up that corresponds to a certain row on the scoreboard. Since every row in the scoreboard potentially can contain unique comments, I really need to just show one specific comment for each of these rows.

EDIT: I know WHY this is happening, I just don't know how to approach the problem.

Any help is greatly appreciated!

This post has been edited by oha055: 30 May 2012 - 01:43 PM

[Dormilich]

first, don’t use global variables.

second, how is the relation of a specific image to a specific <div>?

[oha055]

Dormilich, on 30 May 2012 - 10:41 PM, said:

first, don’t use global variables.

second, how is the relation of a specific image to a specific <div>?

Thanks for the quick reply! There really is no relation between the images and <div>s. Right now I am just saying 'if image is hovered, show every <div class="comment"> on the page'

I thought of dynamically creating id's for every image in php, but don't know if that's the right way to go..

This post has been edited by oha055: 30 May 2012 - 01:49 PM

[Dormilich]

I thought you wanted

Quote

I want just one specific DIV to show up that corresponds to a certain row on the scoreboard.

?

[oha055]

Dormilich, on 30 May 2012 - 10:48 PM, said:

I thought you wanted

Quote

I want just one specific DIV to show up that corresponds to a certain row on the scoreboard.

?

My bad. What I want is to show unique content (text) inside <div class="comment"> based on which image is hovered.

EDIT: And it does just that, however, now every instance of the class comment which is on the page is showing when image is hovered.



EDIT #2: Got it working! identified which comment class to show by using the next() method in jQuery

Modified code:

    function showComment2() {
        var $img = $('img.comment-img');
        $img.mouseover(function(e) {
            $img.mousemove(function(e) {
                var $com = $(this).next();
                $com.css('left', e.pageX + 15);
                $com.css('top', e.pageY + 15);
                $com.show();
            });
        });
        $img.mouseout(function() {
            $(this).next().hide();
        });
    } 

This post has been edited by oha055: 30 May 2012 - 03:49 PM