4 Replies - 459 Views - Last Post: 30 May 2012 - 01:52 PM

#1 oha055  Icon User is offline

  • D.I.C Regular

Reputation: 49
  • View blog
  • Posts: 273
  • Joined: 02-February 09

jQuery: problem showing the right content

Posted 30 May 2012 - 01:36 PM

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


Is This A Good Question/Topic? 0
  • +

Replies To: jQuery: problem showing the right content

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3576
  • View blog
  • Posts: 10,442
  • Joined: 08-June 10

Re: jQuery: problem showing the right content

Posted 30 May 2012 - 01:41 PM

first, donít use global variables.

second, how is the relation of a specific image to a specific <div>?
Was This Post Helpful? 0
  • +
  • -

#3 oha055  Icon User is offline

  • D.I.C Regular

Reputation: 49
  • View blog
  • Posts: 273
  • Joined: 02-February 09

Re: jQuery: problem showing the right content

Posted 30 May 2012 - 01:47 PM

View PostDormilich, 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

Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3576
  • View blog
  • Posts: 10,442
  • Joined: 08-June 10

Re: jQuery: problem showing the right content

Posted 30 May 2012 - 01:48 PM

I thought you wanted

Quote

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

?
Was This Post Helpful? 0
  • +
  • -

#5 oha055  Icon User is offline

  • D.I.C Regular

Reputation: 49
  • View blog
  • Posts: 273
  • Joined: 02-February 09

Re: jQuery: problem showing the right content

Posted 30 May 2012 - 01:52 PM

View PostDormilich, 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

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1