Load text data into cell, truncated (just a few words)... then...more...

SailRCG
SailRCG
edited February 11, 2022 in Analytics #1
<p>I am trying to manage the overall look of a report using textual data, in a way that a single line row-by-row exists onLoad.  However, I would like to know when a text segment has been truncated by showing a "more..." or "read more..." is shown at the end of the cell where the text has been truncated in order to maintain a single line / row-by-row table.  </p>
<p> </p>
<p>When a user hovers over the cell containing the truncated text, with the "more..." or "read more..." the full text will be presented in multiple lines as needed within the cell. In other words, the row / cell height increases to accommodate the entire text paragraph.   </p>
<p> </p>
<p>The effect can either be on mouseOver / mouseOut or by mouseClick toggle. In either case, the report should go back to a single line, row-by-row. </p>
<p> </p>
<p>You can see my expected interaction chain of events in the attached png "mock-up" files.</p>
<p> </p>
<p>First the report is executed (png #1), then the user clicks on a cell for more detail (png #2), then the user clicks a different cell (png #3), and finally clicking the expanded cell, the report returns to it's original state (png #4).</p>
<p> </p>
<p>Any ideas? </p>

Comments

  • SailRCG
    SailRCG
    #2
    <p>I will be trying something like this.... however, I am trying to get the data into the para-attrib on two different para attribs....</p>
    <p> </p>
    <p><!DOCTYPE html></p>
    <p><html></p>
    <p><head></p>
    <p><script src="<a data-ipb='nomediaparse' href='https://ajax.googleapis.com/ajax/libs/jquery.1.12.4/jquery.min.js'>https://ajax.googleapis.com/ajax/libs/jquery.1.12.4/jquery.min.js"></script></a></p&gt;
    <p><script></p>
    <p>$(document).ready(function(){</p>
    <p>   $("p").on("mouseover",function(){</p>
    <p>       $(this).hide();</p>
    <p>});</p>
    <p>  $("p").on("mouseout"),function(){</p>
    <p>    $(this).show();</p>
    <p>});</p>
    <p>});</p>
    <p></script></p>
    <p></head></p>
    <p><body></p>
    <p> </p>
    <p><p>sweep over me with the mouse... I'll go away then come back.</p></p>
    <p><p>me too...</p></p>
    <p><p>me three...</p></p>
    <p></body></p>
    <p></html></p>
    <p> </p>
    <p> </p>
    <p>Other suggestions are completely welcome!</p>
  • Clement Wong
    Clement Wong E mod
    #3
    <p>There's more than one way to do this.</p>
    <p> </p>
    <p>The attached solution one way using jQuery to highlight rows, alternate colors, and hide and show elements.  It was tested it in iHub 3.1.1 Designer.</p>
    <p> </p>
    <p> </p>
    Warning No formatter is installed for the format ipb

Categories

image
OpenText CE Products
Magellan Text Mining
Docs & APIs