javascript - Remove blinking tip for other tr in table -
javascript - Remove blinking tip for other tr in table -
i have problem display of tip on table cells. in 1 line tr link date of sec tr in same column content tip. problem tip flashes , reference can not pressed inside. tried utilize settimeout unfortunately not work. tip appeared after moving field td on same link. single row of table: http://jsfiddle.net/65jlc/
link little source: http://jsfiddle.net/9me9y/
please help me. thanks.
html
`<div class="view-content"> <div class="calendar-calendar"><div class="month-view"> <table class="full"> <thead> <tr> <th class="days sun" id="sunday">sun.</th> </tr> </thead> <tbody> <tr class="date-box"> <td id="kalendarz_wydarzen-2014-05-20-date-box" class="date-box past" colspan="1" rowspan="1" data-date="2014-05-20" headers="wtorek" data-day-of-month="20" > <div class="inner"> <div class="month day"> <a href="calendar-node-field-data-wydarzenia/day/2014-05-20">20</a> </div> </div> </td> </tr> <tr class="single-day"> <td id="kalendarz_wydarzen-2014-05-20-0" class="single-day past" colspan="1" rowspan="1" data-date="2014-05-20" headers="wtorek" data-day-of-month="20" > <div class="inner"> <div class="item"> <div class="view-item view-item-kalendarz_wydarzen"> <div class="calendar monthview"> <div class="calendar.26.field_data_wydarzenia.0.0 contents"> <a href="/node/some-node">something text / link etc.</a> </div> <div class="cutoff"> </div> </div> </div> </div> </div> </td> </tr> </tbody> </table> </div> </div> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>`
js/jquery
$(document).ready(function(){ $(".month.day a").closest('tr').next().find("td").css("display","none"); var wsk=$(".month.day a").parent().parent().parent(); $(wsk).mouseenter( function(){ cleartimeout(tiptimeout); $(this).css("background-color", "pink"); var komorka=$(this).closest("td").index(); komorka+=1; $(this).closest('tr').next().find("td:nth-child("+komorka+")").css("z-index","10").css("display","block").css("padding","10px"); }); $(wsk).mouseleave( function(){ var komorka=$(this).closest("td").index(); komorka+=1; tiptimeout=settimeout(function(){ $(this).closest('tr').next().find("td:nth-child("+komorka+")").css("display","none"); },2000); $(this).closest('tr').next().find("td:nth-child("+komorka+")").css("display","none"); }); });
css .month.day{ background-color: green; z-index:0; } table.full{ position:relative; } td.single-day{ position:absolute; background-color: red; bottom:0px; z-index:; }
i think need alter mouseleave action cell, cell tip.
javascript jquery blinking
Comments
Post a Comment