SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    jQuery not working

    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.
    Code JavaScript:
        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
    Code HTML4Strict:
    [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]
    All those who wander aren't lost.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    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?

  3. #3
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.
    All those who wander aren't lost.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by nofel View Post
    .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.
    Set the image to display:block to cure the gap.

    If you make the tooltip appear on hover make sure that the page doesn't jump when the tooltip fills the space.

    You seem to have that fiddle working from the looks of it? Why don't you just fade it in and out with jquery.

    e.g.
    Code:
    $( "ul>li>img" ).hover(
    function(){
         $(this).parents("ul")
         .find("li.toolTip")
         .fadeIn('slow');
    },
    function(){
        $(this).parents("ul")
        .find("li.toolTip")
        .fadeOut('slow');
    }
    );
    Code:
    .cat li img{
    	width:400px;
    	height:400px;
        display:block;
    }
    li.toolTip{display:none}

  5. #5
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Not sure i followed. I don't see any div in the jQuery code? I don't know the real function of .parents() here
    All those who wander aren't lost.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by nofel View Post
    Not sure i followed. I don't see any div in the jQuery code?
    Not sure I followed you either

    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.
    Code:
    $( "ul>li>img" ).hover(
    function(){
         $(this).closest("ul")
         .find("li.toolTip")
         .fadeIn('slow');
    },
    function(){
        $(this).closest("ul")
        .find("li.toolTip")
        .fadeOut('slow');
    }
    );

  7. #7
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    so, here is my code in simple, what confuses me is how do i select $(this).$(".toolTip") as when i do, it select the .cat.
    Code JavaScript:
    jQuery(document).ready(function() {
        $(".cat > ul > li").on('mouseenter',function(){
                //slide up div.toolTip
            });
        $(".cat > ul > li").on('mouseleave',function(){
                //slide down div.toolTip (and hide)
        });
     
    });
    and html
    Code HTML4Strict:
    <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
    All those who wander aren't lost.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    and html
    Code HTML4Strict:
    <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.

    here is a working example.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <script src="http://code.jquery.com/jquery.js"></script>
    <style type="text/css">
    ul {
    	margin:0;
    	padding:0;
    	list-style:none;
    	zoom:1.0;
    	overflow:hidden;
    }
    .cat img {
    	display:block;
    	cursor:pointer
    }
    .cat li {
    	float:left;
    	clear:left
    }
    .toolTip {
    	display:none;
    	color:#fff;
    	background:#000;
    	width:400px;
    	min-height:150px;
    	opacity:0.5;
    	position:absolute;
    	bottom:0;
    	width:400px;
    }
    .toolTip a, .toolTip a:visited { color:#fff }
    .tip { position:relative; }
    </style>
    </head>
    
    <body>
    <div class="cat">
    		<ul>
    				<li class="tip"><img src="http://www.vervemgmt.com/wp-content/uploads/2012/06/Fashion-Marketing.jpg" width="400" height="400" />
    						<div class="toolTip"><a href="">Simple hot</a></div>
    				</li>
    		</ul>
    </div>
    <script type="text/javascript">
    
    jQuery(document).ready(function() {
        $(".cat > ul > li").on('mouseenter',function(){
        //slide up div.toolTip
       $(this).closest(".cat")
         .find(".toolTip")
         .fadeIn('slow');
         });
        $(".cat > ul > li").on('mouseleave',function(){
        //slide down div.toolTip (and hide)
      $(this).closest(".cat")
        .find(".toolTip")
        .fadeOut('slow');
        });
     
    });
    
    </script>
    </body>
    </html>
    I assumed you wanted the tip on the bottom part of the image.

  9. #9
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    ur awesome @Paul O`B; just confused over this part of code
    Code JavaScript:
      $(this).closest(".cat")
        .find(".toolTip")
    in this code, what is $(this) referring to? the code above or on same line.
    All those who wander aren't lost.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by nofel View Post
    ur awesome @Paul O`B; just confused over this part of code
    Code JavaScript:
      $(this).closest(".cat")
        .find(".toolTip")
    in this code, what is $(this) referring to? the code above or on same line.
    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:

    Code:
     $(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

  11. #11
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.
    Code JavaScript:
    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');
        });
     
    });
    All those who wander aren't lost.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Can I have the exact html that goes with the above?

    ... and why do you have the same routines twice? Was that just a typo here.

    If you are looking for an h3 in the same context then just travel up to a common parent.

    e.g. The li parent in my example

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <script src="http://code.jquery.com/jquery.js"></script>
    <style type="text/css">
    ul {
    	margin:0;
    	padding:0;
    	list-style:none;
    	zoom:1.0;
    	overflow:hidden;
    }
    .cat img {
    	display:block;
    	cursor:pointer
    }
    .cat li {
    	float:left;
    	margin:10px
    }
    .toolTip {
    	display:none;
    	color:#fff;
    	background:#000;
    	width:400px;
    	min-height:150px;
    	opacity:0.5;
    	position:absolute;
    	bottom:0;
    	width:400px;
    }
    .toolTip a, .toolTip a:visited { color:#fff }
    .tip { position:relative; }
    </style>
    </head>
    
    <body>
    <div class="cat">
    		<ul>
    				<li class="tip"><img src="http://www.vervemgmt.com/wp-content/uploads/2012/06/Fashion-Marketing.jpg" width="400" height="400" />
    						<div class="toolTip"><a href="">Simple hot</a></div>
    				</li>
    				<li class="tip"><img src="http://www.vervemgmt.com/wp-content/uploads/2012/06/Fashion-Marketing.jpg" width="400" height="400" />
    						<div class="toolTip"><a href="">Simple hot</a></div>
    				</li>
    				<li class="tip"><img src="http://www.vervemgmt.com/wp-content/uploads/2012/06/Fashion-Marketing.jpg" width="400" height="400" />
    						<div class="toolTip"><a href="">Simple hot</a></div>
    				</li>
    		</ul>
    </div>
    <script type="text/javascript">
    
    jQuery(document).ready(function() {
        $(".cat > ul > li").on('mouseenter',function(){
        //slide up div.toolTip
       $(this).closest("li")
         .find(".toolTip")
         .fadeIn('slow');
         });
        $(".cat > ul > li").on('mouseleave',function(){
        //slide down div.toolTip (and hide)
      $(this).closest("li")
        .find(".toolTip")
        .fadeOut('slow');
        });
     
    });
    
    </script>
    </body>
    </html>
    If you travel up to the main parent then you would find all the tooltips and not just the one in the current context.

  13. #13
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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
    All those who wander aren't lost.

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    HI,

    You have errors in the script. It just needs to be this:

    Code:
     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:

    Code:
    .cat-title {
    	opacity:1.0;
    	background:rgba(0,0,0,0.5);		
    	text-align:center;
    	position:relative;	
    }
    .cat-title span{
    	position:absolute;
    	left:0;
    	right:0;
    	bottom:0;
    }
    Code:
    <div class="cat-title"><span>Books &amp; Mags</span></div>

    Use rgba (ie9+) instead of opacity (background:rgba(0,0,0,0.5) and the text won't get transparent.

  15. #15
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    i like the rgba, but i don't want to remove height, isn't there anyway i can make the text sit at bottom
    All those who wander aren't lost.

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by nofel View Post
    isn't there anyway I can make the text sit at bottom
    I just gave you one way? (and it didn't involve changing the height)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •