WordPress.org

Ready to get started?Download WordPress

Forums

Jquery Comments on Hover display reply Link (14 posts)

  1. Tiago Duarte
    Member
    Posted 3 years ago #

    Hello there everyone,

    I'm trying to make a little script in jQuery that must:

    • 1: Hide the reply link on every comment (.comment-autor-meta .comment-responder)
    • 2: Shows the reply link when the user hovers each comment
    • 3: Hides the reply link on mouseout

    My current script is:

    <script type="text/javascript">
    			$(document).ready(function(){
    				$(".comment-autor-meta .comment-responder").hide();
    					$(".commentlist li").hover(
        				function() {
          					$(".comment-autor-meta .comment-responder").show().siblings(".comment-autor-meta .comment-responder").hide();
        				},
    				    function() {
          					$(".comment-autor-meta .comment-responder").hide();
        				}
      				);
    			});
    		</script>

    And the markup is:

    <ol class="commentlist">
    	<li id="comment-46" class="comment byuser comment-author-test even thread-even depth-1">
        	<div class="comment-avatar"><!-- User avatar --></div>
    		<div class="comentario">
            	<div class="comment-autor-meta"><b><!-- User name --><span><!-- wrote time ago --></span></b>
    				<div class="comment-responder"> <!-- Div that should be hidden and showed on mouseover -->
    					<div class="comentario-link-resposta"><a class='comment-reply-link'>Reply link</a></div>
    				</div>
    			</div>
      			<div class="comment-conteudo">
            	    <p>Hello world!</p>
            	</div>
    		</div>
    		<div class="clear"></div>
    </li>

    I removed some of the PHP functions since there was no need for that.

    Now, the problem with my script is that when i open the page, every reply link is hidden (this is working good), yet, when i hover one comment every "reply" link is shown, when only 1 should be...

    Any help would be appreciated,

    Thanks :)

  2. Sidney Harrell
    Member
    Posted 3 years ago #

    I think this should work:

    <script type="text/javascript">
    $(document).ready(function(){
       $(".comment-autor-meta .comment-responder").hide();
       $(".commentlist li").hover(
          function() {
             this.find(".comment-autor-meta .comment-responder").show();
          },
          function() {
             this.find(".comment-autor-meta .comment-responder").hide();
          }
       );
    });
    </script>

    If someone can tell me why not, then I welcome the opportunity to learn something new! I've only been in javascript for a couple of months, so I know I have a lot to learn.

  3. Tiago Duarte
    Member
    Posted 3 years ago #

    Sidney, thank you for your reply :)

    Unfortunatly, i tried that aswell before, and the same thing was happening.

    I then added the sibblings to hide every element other than the one being shown, and it should've worked but it doesn't...

  4. Sidney Harrell
    Member
    Posted 3 years ago #

    Ok, I did some testing and got it figured out:

    <script type="text/javascript">
    jQuery(document).ready(function(){
       jQuery(".comment-autor-meta .comment-responder").hide();
       jQuery(".commentlist li").hover(
          function() {
             jQuery(this).find(".comment-autor-meta .comment-responder").stop(false, true).slideDown();
          },
          function() {
             jQuery(this).find(".comment-autor-meta .comment-responder").stop(false, true).slideUp();
          }
       );
    });
    </script>

    You might want to play around with the effects and pick something you like. I did slideUp and slideDown cause I didn't like the way the link just popped in and out, and the stop calls are to prevent effect que buildup.

  5. Tiago Duarte
    Member
    Posted 3 years ago #

    Wow! Thanks a bunch!

    Now it only has a problem, if i hover a parent Comment, the child comment will show the link aswell :S

    Basically, we need to find a way to prevent it from digging into child li's...

  6. Sidney Harrell
    Member
    Posted 3 years ago #

    If you use children() instead of find() it will only go down one level. Since the hidden div is three levels below, use three calls to children.

    jQuery(document).ready(function(){
       jQuery(".comment-autor-meta .comment-responder").hide();
       jQuery(".commentlist li").hover(
          function() {
             jQuery(this).children("div.comentario").children("div.comment-autor-meta").children("div.comment-responder").stop(false, true).slideDown();
          },
          function() {
             jQuery(this).children("div.comentario").children("div.comment-autor-meta").children("div.comment-responder").stop(false, true).slideUp();
          }
       );
    });
  7. Tiago Duarte
    Member
    Posted 3 years ago #

    Hello again Sidney :)

    Well, it's working better now, but if i hover a child element the parent will appear too... The opposite effect is happening now.. :/

  8. Sidney Harrell
    Member
    Posted 3 years ago #

    Wow, that is a hard problem. because the child is a part of the parent, when you are hovering on the child, you are also hovering on the parent. You could try the .parents selector.

    jQuery(document).ready(function(){
       jQuery(".comment-autor-meta .comment-responder").hide();
       jQuery(".commentlist li").hover(
          function() {
             jQuery(this).children("div.comentario").children("div.comment-autor-meta").children("div.comment-responder").stop(false, true).slideDown();
             jQuery(this).parents('li').children("div.comentario").children("div.comment-autor-meta").children("div.comment-responder").hide();
          },
          function() {
             jQuery(this).children("div.comentario").children("div.comment-autor-meta").children("div.comment-responder").stop(false, true).slideUp();
          }
       );
    });
  9. Tiago Duarte
    Member
    Posted 3 years ago #

    Still not working :/

  10. Sidney Harrell
    Member
    Posted 3 years ago #

    Can you post a bigger sample of the html code? The sample you posted only has one level, and I need to see how you nested the comments.

  11. Tiago Duarte
    Member
    Posted 3 years ago #

    Oh boy, ugly piece of code coming (yeah i know, gotta clean it up...)

    [Code moderated as per the Forum Rules. Please use the pastebin]

  12. Tiago Duarte
    Member
    Posted 3 years ago #

    Woops, forgot to put it on pastebin :X

    http://pastebin.com/1hEV3F4g

    There you go ;)

  13. Sidney Harrell
    Member
    Posted 3 years ago #

    Seems to be working here:

    http://sidneyharrell.com/jqueryproblem.html

    Only problem I can see is if you hover on the child, and then go straight to the parent, the parents comment link doesn't appear right away. You have to mouse out and then mouse back in. Weird. But the comment link of the parent doesn't appear when you are hovering on the child, only the child's comment link.

    I found this cool program called Tidy to clean up the html.
    tidy -im jqueryproblem.html
    -i for pretty printing and -m for modify in place.
    It gave me a bunch of warnings for problems with the html. Maybe one of them was keeping the jquery code from working.
    I noticed Chrome kept bugging me if I wanted to translate the page from Portugese. Are you from Brazil? I was listening to, I think it was the "Lately in JavaScript" podcast and one of the hosts is from Brazil. It's a small world, after all.

  14. Tiago Duarte
    Member
    Posted 3 years ago #

    Yeah, that's the same problem i'm having. Sorry for not explaining it before ;)

    Hmm yeah, i'll try optimizing the HTML further and see if I can come up with anything!

    Hehe no, i'm from Portugal :D But it is a small world indeed...

    Thanks for the help!

Topic Closed

This topic has been closed to new replies.

About this Topic