to show div inside the table cell using javascript RSS

• • Reply
  

  chezhian_in0...

  Contributor

  2512 Points

  615 Posts

  to show div inside the table cell using javascript

  Feb 07, 2012 08:03 AM|LINK

   I code will show/hide a div on the mouse over Field 2

  <script language="javascript">
      function mouseOver() {
          var oSource = window.event.srcElement;
         e = document.getElementById("z");
         e.style.visibility = "visible";
         y = parseInt(oSource.parentElement.offsetParent.cells[4].clientHeight/2)+25;
         x = (parseInt(oSource.parentElement.offsetParent.cells[0].offsetWidth) + parseInt(oSource.parentElement.offsetParent.cells[1].offsetWidth)) - 45
         e.style.left = x + 'px';
         e.style.top = y + 'px';
         var divht = ((parseInt(document.getElementById('Col2').clientHeight)/2)+10);
         e.style.height = divht + 'px';
      }
      function mouseaway() {
          e = document.getElementById("z");
          e.style.visibility = "hidden";
      }
  
  </script>

  <div id="z" style="position: absolute; top: 290px; left: 40px; width: 50px; background-color: black; text-align: center; color: white; visibility: hidden;"> Tool tip</div>

  Col1	Col2	col3
  Field1	Field2	Field3

  div tooltip javascript

  With Thanks.,
  R.Chezhian.,
  =============================================
  Please Mark the helpful post(s) as Answered
• • Reply
  

  cninjas

  Contributor

  4868 Points

  851 Posts

  Re: to show div inside the table cell using javascript

  Feb 07, 2012 09:42 AM|LINK

  hi

  i think you can use the Jquery for this ...there is an option to Toggle on/off whererever reqd.

  just a thought..hope it helps,thanks,

  div tooltip javascript

  Microsoft Community Contributor 2011
  Niranjan