jquery - on hover how to show inner absolute position div to outside scrollable div -



jquery - on hover how to show inner absolute position div to outside scrollable div -

i have fixed width , height div overflow:auto property, under div have 1 table multiple row , on 1 td showing 1 div(pop-content) onhover fade-in effect. when hovered on lastly td div showing comes under scroll area , create much blank space in bottom don't want.

i want show div(pop-content) outside scrollable area if row lastly or sec lastly without losing scroll property. below code

jquery:-

$(function () { $(".pop-outer").each(function () { $(this).hover(function () { $(this).find(".pop-content").stop(true, true).fadein(300); }, function () { $(this).find(".pop-content").stop(true, true).fadeout(300); }); }); });

html:-

<div class="grid-inner clearfix" style="overflow:auto; height:135px"> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="new-grid"> <tr> <td class="even-color1" align="left" valign="middle"> <div class="pop-outer" style="position:relative"> <a href="#">williams, josh</a> <div class="pop-content" style="display:none; position:absolute; right:5px; top:5px"> <span class="lft-arrow"></span> <div class="pop-img-cont"><img src="image/candidate1-large.jpg" alt="" /></div> <div class="pop-description"> <h3>josh williams</h3> <strong>boston, ma</strong> <h4>how define success?</h4> <p>lorem ipsum dolor sit down amet, consectetur adipiscing elit. in porttitor ultricies odio ut placerat. nam molestie consequat est, et sagittis nisl laoreet eu. integer sodales, odio id malesuada commodo, neque ante faucibus turpis, ut porttitor risus libero sit down amet leo.</p> </div> </div> </div> </td> <td class="even-color2" align="left" valign="middle">new york</td> <td class="even-color3" align="left" valign="middle">goldman sachs &amp; co</td> <td class="even-color4" align="left" valign="middle">nyu</td> <td class="even-color5" align="left" valign="middle">06/01/2012</td> </tr> <tr> <td class="even-color1" align="left" valign="middle"> <div class="pop-outer" style="position:relative"> <a href="#">williams, josh</a> <div class="pop-content" style="display:none; position:absolute; right:5px; top:5px"> <span class="lft-arrow"></span> <div class="pop-img-cont"><img src="image/candidate1-large.jpg" alt="" /></div> <div class="pop-description"> <h3>josh williams</h3> <strong>boston, ma</strong> <h4>how define success?</h4> <p>lorem ipsum dolor sit down amet, consectetur adipiscing elit. in porttitor ultricies odio ut placerat. nam molestie consequat est, et sagittis nisl laoreet eu. integer sodales, odio id malesuada commodo, neque ante faucibus turpis, ut porttitor risus libero sit down amet leo.</p> </div> </div> </div> </td> <td class="even-color2" align="left" valign="middle">new york</td> <td class="even-color3" align="left" valign="middle">goldman sachs &amp; co</td> <td class="even-color4" align="left" valign="middle">nyu</td> <td class="even-color5" align="left" valign="middle">06/01/2012</td> </tr> <tr> <td class="even-color1" align="left" valign="middle"> <div class="pop-outer" style="position:relative"> <a href="#">williams, josh</a> <div class="pop-content" style="display:none; position:absolute; right:5px; top:5px"> <span class="lft-arrow"></span> <div class="pop-img-cont"><img src="image/candidate1-large.jpg" alt="" /></div> <div class="pop-description"> <h3>josh williams</h3> <strong>boston, ma</strong> <h4>how define success?</h4> <p>lorem ipsum dolor sit down amet, consectetur adipiscing elit. in porttitor ultricies odio ut placerat. nam molestie consequat est, et sagittis nisl laoreet eu. integer sodales, odio id malesuada commodo, neque ante faucibus turpis, ut porttitor risus libero sit down amet leo.</p> </div> </div> </div> </td> <td class="even-color2" align="left" valign="middle">new york</td> <td class="even-color3" align="left" valign="middle">goldman sachs &amp; co</td> <td class="even-color4" align="left" valign="middle">nyu</td> <td class="even-color5" align="left" valign="middle">06/01/2012</td> </tr> </table> </div>

try below code

<div class="pop-content" style="display:none;background: #eee;border: 1px solid #ccc;padding: 10px;border-radius: 8px;box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);position: absolute;width: 200px;">

replace everywhere within html , try.

jquery html

Comments

Post a Comment

Popular posts from this blog

web services - java.lang.NoClassDefFoundError: Could not initialize class net.sf.cglib.proxy.Enhancer -

web services - java.lang.NoClassDefFoundError: Could not initialize class net.sf.cglib.proxy.Enhancer - when trying request rest service @ time of response getting exception.. feb 21, 2013 2:34:49 pm com.sun.jersey.spi.container.containerresponse mapmappablecontainerexception severe: exception contained within mappablecontainerexception not mapped response, re-throwing http container java.lang.noclassdeffounderror: not initialize class net.sf.cglib.proxy.enhancer @ org.hibernate.proxy.pojo.cglib.cgliblazyinitializer.getproxyfactory(cgliblazyinitializer.java:117) @ org.hibernate.proxy.pojo.cglib.cglibproxyfactory.postinstantiate(cglibproxyfactory.java:43) @ org.hibernate.tuple.entity.pojoentitytuplizer.buildproxyfactory(pojoentitytuplizer.java:162) @ org.hibernate.tuple.entity.abstractentitytuplizer.<init>(abstractentitytuplizer.java:135) @ org.hibernate.tuple.entity.pojoentitytuplizer.<init>(pojoentitytuplizer.java:55) @ org.hibernate.tuple.e...
Read more

Accessing MATLAB's unicode strings from C -

Accessing MATLAB's unicode strings from C - how can access underlying unicode info of matlab strings through matlab engine or mex c interfaces? here's example. let's set unicode characters in utf-8 encoded file test.txt, read as fid=fopen('test.txt','r','l','utf-8'); s=fscanf(fid, '%s') in matlab. now if first feature('defaultcharacterset', 'utf-8') , c engevalstring(ep, "s") , output text file utf-8. proves matlab stores unicode internally. if mxarraytostring(enggetvariable(ep, "s")) , unicode2native(s, 'latin-1') give me in matlab: non-latin-1 characters replaced character code 26. need getting access underlying unicode info c string in unicode format (utf-8, utf-16, etc.), , preserving non-latin-1 characters. is possible? my platform os x, matlab r2012b. addendum: documentation explicitly states "[mxarraytostring()] supports multibyte encoded characters...
Read more

javascript - mongodb won't find my schema method in nested container -

javascript - mongodb won't find my schema method in nested container - i trying access method of schema stored within mixed container. here situation : have cases model can many different things, have schema each of these things stored in "casecontent" mixed property. var caseschema = mongoose.schema({ casecontent : {}, object : {type:string, default : "null"}, collision : {type : boolean, default : false} }); the casecontent property filled model of 1 of schemas, 1 exemple : var treeschema = new mongoose.schema({ applecount : {type : number, default : 3} }); treeschema.methods.dostuff = function (data) { console.log('hey, listen'); homecoming true; }; then, want utilize method of schema original container : caseschema.methods.dostuff = function (data) { if (this.casecontent.dostuff !== undefined) { this.casecontent.dostuff(); console.log('it worked'); } else { ...
Read more