SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    [Jquery] Show only current hovered child

    Hey,

    I've tried looking for a solution arounf but I'm not quite sure I'm looking for the right 'term'

    the situation is I have a list of things on a page that are dynamically generated and when I hover each of them I'd like a 'popup' with more info relative to what is hovered to appear.

    I don't want to have to specify the rul for every popup separately so my question is how do I target a child div to appear for only the hovered element if there are many divs with the same name on the page?

    My code:
    Code:
    ...
    <li>
    <h4>•Title of thing</h4>
    <div class="popup">
    this is the div i'd like to appear on hover
    
    </div>
    </li>
    
    <li>
    <h4>•Title of thing</h4>
    <div class="popup">
    this is the div i'd like to appear on hover
    
    </div>
    </li>
    Thanks for looking

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Since you have the "popup" class on the divs, you could use something like this:

    Code javascript:
    $(function () {
        $('div.popup').each(function () {
            var toggleNext = function () {
                $(this).next().toggle();
            };
     
            // attach event
            $(this).prev().click(toggleNext);
     
            // hide once attached
            $(this).hide();
        });
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry I should have been more clear,

    When I hover the list element, that's whn i'd like the 'popup' div to appear.

    the same way css would show the div on hover;
    Code:
    .popup{display:none;}
    li:hover .popup{display:block; position:relative; top:-59px; right:-7px;}
    but I'd like to add some animation to it with Jquery

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    In that case, use the hover event instead of the click event, with an animation technique such as slideToggle.

    Sounds simple, right? It is.

    Code javascript:
    function toggleNext() {
        $(this).slideToggle();
    }
    ...
    $(this).prev().hover(toggleNext);
    ...

    If you need different separate function to show and hide in different ways, you can give the hover event two separate functions instead.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry to bump this. I had found another solution to this at the time but have now run into the problem again on another project.

    I can't really understand where this example should be placed in my code.

    This is what I have:
    jQuery:
    Code:
    $(function(){
    	var offsetX = 20;
    	var offsetY = 20;
    	$('a.thumb-link').hover(function(e){
    		// mouse on		
    		$('.preview-image')
    		.show()
    		.css('top', e.pageY + offsetY )
    		.css('left', e.pageX + offsetX )
    		.appendTo('body');
    	}, function(){
    		// mouse off
    		$('.preview-image').hide();
    		
    	});
    	$('a.thumb-link').mousemove(function(e){
    		$('.preview-image')
    		.css('top', e.pageY + offsetY )
    		.css('left', e.pageX + offsetX );
    	});
    
    });
    HTML:
    Code:
    <li class="thumb">
    <a class="thumb-link" href="/link/to/imagepage">
    <img src="http://www.sitepoint.com/forums/images/cartoons/image1.gif" height="170" alt="caption" /></a>
    <div class="preview-image">
    <img src="http://www.sitepoint.com/forums/images/cartoons/image1.gif" height="300px" alt="caption" />
    <div class="thumb-caption">caption</div>
    </div><!-- /.preview-image -->
    </li>
    
    <li class="thumb">
    <a class="thumb-link" href="/link/to/imagepage">
    <img src="http://www.sitepoint.com/forums/images/cartoons/image2.gif" height="170" alt="caption" /></a>
    <div class="preview-image">
    <img src="http://www.sitepoint.com/forums/images/cartoons/image2.gif" height="300px" alt="caption" />
    <div class="thumb-caption">caption</div>
    </div><!-- /.preview-image -->
    </li>
    etc
    So my problem;
    This works, but obviously is showing every instance of 'preview-image' for each thumbnail, so naturally the image last in the list will always display even though the others exist underneith it.

    I just can't work out how to get only the child 'preview-image' of the currently hovered parent ('thumb') to show

    Thanks for looking, again.


    [EDIT]
    not sure how 'http://sitepoint got in there...' you get the idea though

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    You'll want to use the this keyword as the context for the selector.
    See the jQuery() documentation for details on that.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks,

    I'm a little closer but not sure whats happening now:
    Code:
    $(function(){
    	var offsetX = 20;
    	var offsetY = -110;
    	$('a.thumb-link').mouseenter(function(e){
    		// mouse on		
    		$(this).next('.preview-image')
    		.fadeIn(300)
    		.css('top', e.pageY + offsetY )
    		.css('left', e.pageX + offsetX )
    		.appendTo('body');
    	});
    	$('a.thumb-link').mouseleave(function(e){
    		$('.preview-image')
    		.fadeOut(200);		
    	});
    	
    	$('a.thumb-link').mousemove(function(e){
    		$('.preview-image')
    		.css('top', e.pageY + offsetY )
    		.css('left', e.pageX + offsetX );
    	});
    
    });
    It works per image but after it dissappears it doesn't come back again...

    Any help?

    Thanks


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
  •