CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user222
user222

Reputation: 597

display image in table row

I have a requirement on mouse over on the table, image one will display and on mouse over of the image one, a tooltip will display. When I click on tooltip link test, image two has to display inside td and previous image one should hide.

Issue is image two is getting displayed but I can see only if I mouse over on the table. How can I show image two once I click on tooltip link test without mouse over?

Here is the fiddle http://jsfiddle.net/0w9yo8x6/45/.

CSS :

td.myData > img  
{
    display: none;
    float: right;
    height: 19px;
}

td.myData:hover > img 
{
    display: inline-block;
}

JavaScript :

function test(data)
{
    alert('test invoked with data: ' + data);
    var two = document.getElementById('two');
    two.style.visibility = 'visible';
    var one = document.getElementById('one');
    one.style.visibility = 'hidden';
}

Upvotes: 2

Views: 3206

Answers (2)

mikelt21
mikelt21

Reputation: 2778

Add 

two.style.display = 'block';

to your test method. Currently you're just setting the visibility property but the display property is still set to none in the CSS, so the image isn't rendering until you hover over it.

See fiddle: http://jsfiddle.net/0w9yo8x6/47/

Upvotes: 1

Sai
Sai

Reputation: 1949

In your test data script add the display block/none part like this,

<script>
      function test(data){
        alert("test invoked with data: " + data);
     var two = document.getElementById('two');
         two.style.visibility = 'visible';
         two.style.display = 'block';
      var one = document.getElementById('one');
         one.style.visibility = 'hidden';
         one.style.display = 'none';
    }

</script>

code snippet follows...

$(function() {
  var rowData;
  $(document).tooltip({
    items: "img, [data-title]",
    content: function() {
      var element = $(this);
      if (element.is("img")) {
        rowdata = element.attr("data-title");
        $(document).off('click', '#test');
        $(document).on('click', '#test', function() {
          test(rowdata);
        });


      }

      return $(this).prop('title');
    },
    show: null,
    close: function(event, ui) {
      ui.tooltip.hover(

        function() {
          $(this).stop(true).fadeTo(1000, 1);
        },

        function() {
          $(this).stop(true).fadeOut(200, function() {
            $(this).remove();
          })
        });
    },
    position: {
      my: "left",
      at: "right"
    }
  });
});



$(function() {
  $('.one').attr('title', $('.myTooltipTable').remove().html());
  $(document).tooltip();
});
td.myData > img {
  display: none;
  float: right;
  height: 19px;
}
td.myData:hover > img {
  display: inline-block;
}
<script>
  function test(data) {
    alert("test invoked with data: " + data);
    var two = document.getElementById('two');
    two.style.visibility = 'visible';
    two.style.display = 'block';
    var one = document.getElementById('one');
    one.style.visibility = 'hidden';
    one.style.display = 'none';
  }
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>

<table class="myTooltipTable" style="position:absolute;">
  <tr>
    <td> <span id="test">test</span>
    </td>
  </tr>
</table>

<br/>
<br>
<br>
<table border="1">
  <tr>
    <td class="myData">Data1
      <img class="one" id="one" data-title="Data1" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png" width="15" height="15" alt="" />
      <img class="two" id="two" src="https://www.webkit.org/blog-files/acid3-100.png" width="15" height="15" style="visibility:hidden;" />
    </td>
  </tr>

  <tr>
    <td class="myData">Data2
      <img class="one" id="one" data-title="Data2" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png" width="15" height="15" alt="" />
      <img class="two" id="two" src="https://www.webkit.org/blog-files/acid3-100.png" width="15" height="15" style="visibility:hidden;" />
    </td>
  </tr>

  <tr>
    <td class="myData">Data3
      <img class="one" id="one" data-title="Data3" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png" width="15" height="15" alt="" />
      <img class="two" id="two" src="https://www.webkit.org/blog-files/acid3-100.png" width="15" height="15" style="visibility:hidden;" />
    </td>
  </tr>
</table>

Hope this was what you were looking for...

Upvotes: 1

Related Questions