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.
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…
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.
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…
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();
}
);
});
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.. :/
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();
}
);
});
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.
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]
Woops, forgot to put it on pastebin :X
http://pastebin.com/1hEV3F4g
There you go 😉
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.
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 😀 But it is a small world indeed…
Thanks for the help!
(@tiago150)
15 years, 2 months ago
Hello there everyone,
I’m trying to make a little script in jQuery that must:
My current script is:
And the markup is:
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 🙂