mouseover - fadeout in jQuery -
i trying add jquery function updating div on hover of link inside span html structure is
<ul><li> <div class="timeline"> <span>by</span> <span class="vcard"> <a class="underline user-link" href="/users/aruna">aruna </a> </span> <div style="display: none;" class="image_hover"> student <p> <a onclick="" href="#">show additional details</a> <a href="#">view</a> <p>employee id : </p> <p>project name: </p> <p>project role : r</p> <p>supervisor name : </p> </p> </div> <span class="timeline">about 1 day ago</span> </div> </li> <li> <div class="timeline"> <span>by</span> <span class="vcard"> <a class="underline user-link" href="/users/jasmine">jasmine </a> </span> <div style="display: none;" class="image_hover"> professor <p> <a onclick="" href="#">show additional details</a> <a href="#">view</a> <p>employee id : </p> <p>project name: </p> <p>project role : r</p> <p>supervisor name : </p> </p> </div> <span class="timeline">about 1 day ago</span> </div> </li> </ul> the jquery have written is
i wrote like
jquery(document).ready(function(){ var _selectedlinkel = null; var _detailel = null; var body = jquery("body"); var elem=null; jquery(".user-link").mouseover(function(event) { _selectedlinkel = this; _detailel=jquery(event.target).parent().next(); //_detailel.show(); _detailel.fadein("slow"); elem=jquery(this).parent().next(); _href=jquery(this).attr('href').split("/")[2]; jquery.post('/users/user_detail/?name='+_href, function(data){ //elem.html(data).show(); elem.html(data).fadein("slow"); });//post body.mouseover(_bodymouseoverfunction); }); // user-link var _bodymouseoverfunction = function(event) { if(event.target != _selectedlinkel && event.target != _detailel && jquery.inarray(_detailel, jquery(event.target).parent() ) == -1) { //_detailel.hide(); _detailel.fadeout("slow"); body.unbind("mouseover", _bodymouseoverfunction); } };// mouseover }); the above jquery updates image-hover div , displaying div fadein getting fadeout @ times .
i trying fade out div image_hover if mouse hover out of div(image_hover) or body elements..
in cases , if mouse on link or on div or on of elements inside div (image_hover) , div should not fadeout..
please give suggestions this/.
how ??
your html part of issue. pull off area needs remain open has live within triggers tag, noticed other things well:
- the div containing "image_hover" hidden default (so won't work anyhow).
- there no image tag in html used image-hover (just seemed odd).
- you're using "timeline" css class on 2 distinctly different objects (the top div , in "about 1 day ago" span)...only 1 seems timeline.
- you have 2 links (e.g. anchors) imply possible usage toggles: "show additional details" , "view" (which it?)
- each of link-toggles live inside toggled.
- you have span contain word (not needed)
- consider moving "timeline" tag out of toggle-area.
as such, altered html , created potential solution below. execute desired behavior of opening "details" area (and remain open while hovering).
additionally, don't need hide "details" area...but left in anyway.
in meantime, consider following potential solution:
<html> <head runat="server"> <title></title> <script src="includes/javascript/jquery/version1.4.4/core/jquery-1.4.4.js" type="text/javascript"></script> <style type="text/css"> .vcard { font-family: arial; } .vcard { text-decoration: none; } .vcard a.owner { color: green; } .vcard span.timeline { color:navy; } .vcard span.timeline div.type { display: none; } .vcard span.timeline div.type div.details { display: none; margin-left: 20px; } </style> <script type="text/javascript"> function hoverin() { var card = jquery(this).parent(); var cardtype = jquery('div.type', card); cardtype.fadein('fast', function() { var cardtypedetails = jquery('div.details', this); cardtypedetails.fadein('fast'); }); } function hoverout() { var card = jquery(this).parent(); var cardtype = jquery('div.type', card); cardtype.fadeout('fast', function() { var cardtypedetails = jquery('div.details', this); cardtypedetails.fadeout('fast'); }); } jquery(document).ready(function() { var context = jquery('#mylist'); // target specific timeline object(s). jquery('li div.vcard span.timeline', context).hover(hoverin, hoverout); }); </script> </head> <body> <form id="form1" runat="server"> <ul id="mylist"> <li> <div class="vcard"> <a class="owner" href="/users/aruna">aruna </a> <span class="timeline"> 1 hours ago <div class="type"> <a href="#">student</a> <div class="details"> <div> employee id:<label></label> </div> <div> project name:<label></label> </div> <div> project role:<label></label> </div> <div> supervisor name:<label></label> </div> </div> </div> </span> </div> </li> <li> <div class="vcard"> <a class="owner" href="/users/jasmine">jasmine </a> <span class="timeline"> 2 days ago <div class="type"> <a href="#">professor</a> <div class="details"> <div> employee id:<label></label> </div> <div> project name:<label></label> </div> <div> project role:<label></label> </div> <div> supervisor name:<label></label> </div> </div> </div> </span> </div> </li> </ul> </form> </body> </html>
Comments
Post a Comment