I am applying some jQuery code on my shop page, where products are wrapped in <li> and the title for each is wrapped in a class called .cat-title, i have the following code but its doing nothing.
My html is any generated html like of shop page in woocommerce e.g
[TABLE]
[TR]
[TD="class: votecell"]
[/TD]
[TD="class: postcell"] I am applying some jQuery code on my shop page, where products are wrapped in <li> and the title for each is wrapped in a class called .cat-title, i have the following code but its doing nothing.
jQuery("document").ready(function($){
$("ul>li").on('mouseenter',function(){
$(this).parent("div")
.find(".cat-title")
.animate({opacity: 1},1000)
.slideDown("slow")
})
$("ul>li").on('mouseenter',function(){
$(this).parent("div")
.find(".cat-title")
.animate({opacity: 0},1000)
.fadeOut("slow")
})
}) My html is any generated html like of shop page in woocommerce e.g
<div class="woocommerce">
<div class="products">
<ul class="products">
<li>
<a href="#">
<img width="180" height="190" alt="Entertainment" src="abc.jpg">
<h3>
</a>
<div class="cat-title">Entertainment</div>
</li>
</div>
</div>
[/TD]
[/TR]
[/TABLE]
A real example would be better. Do you have the JS code wrapped in <script> tags? Doe you have the jQuery library linked to the page, about the other jQuery code?
This is a example, i can create. but i want the divs instead of li. i had put new div in comments.Although i want the title li.toolTip to sit on base of each image and when i do hover on image it displays while fadeIn and increasing height, and opposite when i do roll out.
Do you mean you want to change the “li” to divs or do you mean you want to target another element instead. It’s unclear what you mean. If you want to use divs instead of “li” then go ahead and change the structure accordingly?
I don’t know the real function of .parents() here
parent()
The parent() function travels only one level up in the DOM tree. So parent() will select the first parent element. parents()
The parents() function travels up the DOM tree till the document’s root element.
‘closest’ would probably have been more apt as it will return the single match.
<div class="cat">
<ul>
<li><img src="http://www.vervemgmt.com/wp-content/uploads/2012/06/Fashion-Marketing.jpg" width="400" height="400" /></li>
<div class="toolTip"><a href="">Simple hot</a></div><!--div has black background opacity of 0.5-->
</ul>
I read the docs on parents and parent but with the example i posted above, i dont know how to get this working in this case[/QUOTE]
[/quote]
That is invalid html and you won’t be able to select anything from that. Your last div must be outside the ul as a ul can only contain li elements as direct children, or it must be inside the ul.
Bear in mind my technical knowledge of jquery is only beginners level but in the code above $(this) is referring to the element that you targeted with that function (i.e. the list element - $(“.cat > ul > li”). The list is the target and $(this) refers to that list element.
It’s a list element that has a ul as a direct parent which also has a direct parent of .cat.
so:
$(this).closest(".cat")
.find(".toolTip")
This is saying go up the dom from the list element and find the nearest parent that has a class of .cat. When you find a parent with a class of .cat then go and look for a child with a class of .toolTip and do something to it.
I’m sure the JS experts can tell you the technical terms much better than me
I still have limitation in the code, i have multiple div and title but when i do hover on one listed item, all of listed items text disappear. i modified the code a little, changing the selectors as my need.
jQuery(document).ready(function($) {
$(".products > ul > li").on('mouseenter',function(){
//slide up div.toolTip
$(this).closest(".products")
.find("h3")
.fadeIn('slow');
});
$(".products > ul > li").on('mouseleave',function(){
//slide down div.toolTip (and hide)
$(this).closest(".products")
.find("h3")
.fadeOut('slow');
});
});jQuery(document).ready(function($) {
$(".products > ul > li").on('mouseenter',function(){
//slide up div.toolTip
$(this).closest(".products")
.find("h3")
.fadeIn('slow');
});
$(".products > ul > li").on('mouseleave',function(){
//slide down div.toolTip (and hide)
$(this).closest(".products")
.find("h3")
.fadeOut('slow');
});
});
yep, got it working now 2 issues, my page is here www[dot]shellneverknow[dot]com.au/?page_id=45 (hope it doesnt get index), when u rollover, the div comes up but doesn’t fadeout, how can i make the text in center or bottom? with opacity applied, the text is also opaque
You have errors in the script. It just needs to be this:
jQuery(document).ready(function($) {
$(".products > ul > li").on('mouseenter',function(){
//slide up h3 or div.cat-title
$(this).find(".cat-title").fadeIn('slow')
});
$(".products > ul > li").on('mouseleave',function(){
//slide down h3 (and hide)
$(this).find(".cat-title").fadeOut('slow')
});
});
If you want the text at the bottom you could just remove the height but I’m not sure if you want to reduce the height of that overlay. Or you could do this:
and the text won’t get transparent.