CodeCharge Studio
search Register Login  

Web Reports

Visually create Web Reports in PHP, ASP, .NET, Java, Perl and ColdFusion.
CodeCharge.com

YesSoftware Forums -> CodeCharge Studio -> PHP

 expand the display of a label

Print topic Send  topic

Author Message
kirchaj

Posts: 215
Posted: 01/31/2014, 1:37 PM

This may be a newbie question but here goes.

I have a label (a notes field) I am displaying in a grid. sometimes it has a large amount of information and makes the page very long. What I would like to be able to do is display a short piece of the data and have a MORE button which would allow the user to display the whole text.

I am assuming javascript but I am not sure where to start. Any hints would be greatly appreciated.

TK
View profile  Send private message
laneoc

Posts: 147
Posted: 02/01/2014, 10:40 AM

I'm a javascript hack -- I'm sure there are better ways to do this, but here's one:

In the header section of your HTML code.
Quote :
$(document).ready(function()
{
//hide the all of the element with class partial_comments
$(".full_comments").hide();

//toggle the component with class partial_comments
$(".partial_comments").click(function()
{
$(this).next(".full_comments").slideToggle(100);
});
});
This adds classes "partial_comments" and "full_comments". Upon first load of the page, the elements assigned the "full_comments" class are hidden. Upon a click of an element assigned the "partial_comments" class, the elements assigned the "full_comments" class are toggled hidden/shown.

Then in the body of the HTML, add those classes to the blocks you want to "turn on and off":

Quote :
<div class="partial_comments" style="DISPLAY: block">
Click here to toggle comments display...
</div>

<div class="full_comments" style="DISPLAY: block">
{common_comments}
</div>

I created two components: common_comments and common_comments_abbreviated.

Let me know if that helps.


_________________
Lane
View profile  Send private message
kirchaj

Posts: 215
Posted: 02/03/2014, 4:14 PM

Lane,

I think that is very close to what I need but can you tell me if all of the code is there? I don't see the comments_abbrev or what will enable the text on click.

I may just be slow today, but I really appreciate the help.

TK
View profile  Send private message
eratech


Posts: 513
Posted: 02/03/2014, 8:23 PM

TK -

Looks like the {common_comments_abbreviated} label is missing from the 'partial_comments' div in the example (see the {common_comments} in the 'full_comments' div? Just like that)

Like the text says, clicking anywhere on the 'partial_comments' div will find the next thing of class 'full_comments' and make it slide into view (or out of view : that's the power of 'toggle'

You will also need to load jQuery on the page too so the above code will work.

(Great, simple example by the way, Lane)

E
_________________
CCS 3/4/5 ASP Classic, VB.NET, PHP
Melbourne, Victoria, Australia
View profile  Send private message
kirchaj

Posts: 215
Posted: 02/04/2014, 11:19 AM

Thanks Eratech. You helped me get very close to what I am wanting. I think I am still missing a little bit. It initially displays the partial notes (but really displays all of the text) and when I click on MORE it displays the "hidden" text (again all of it). So it looks like there is duplicate text. 1. shouldn't the partial text be only a snippet? 2. Should the partial text not disappear when you click on the MORE? Here is my code

Quote :
<script language="JavaScript" src="js/jquery/jquery-1.10.2.js" type="text/javascript"></script>
<script language="JavaScript" src="js/jquery/jquery-2.1.0.js" type="text/javascript"></script>
<script language="JavaScript">
$(document).ready(function()
{
//hide the all of the element with class partial_comments
$(".full_notes").hide();

//toggle the component with class partial_comments
$(".partial_notes").click(function()
{
$(this).next(".full_notes").slideToggle(100);
});
});

<tr class="Row">
<td>Notes </td>
<td colspan="6">
<div class="partial_notes" style="DISPLAY: block">
{notes_min}
MORE......
</div>
<div class="full_notes" style="DISPLAY: block">
{notes}
</div>
</td>
</tr>
View profile  Send private message
laneoc

Posts: 147
Posted: 02/04/2014, 12:42 PM

How about adding the couple of lines below as identified with " <============".

I'm not sure the first one is required to force partial_notes to be displayed.

The other one should (untested!) toggle the display of partial_notes.

  
<script language="JavaScript" src="js/jquery/jquery-1.10.2.js" type="text/javascript"></script>  
 <script language="JavaScript" src="js/jquery/jquery-2.1.0.js" type="text/javascript"></script>  
 <script language="JavaScript">  
 $(document).ready(function()   
 {   
 //hide the all of the element with class partial_comments   
 $(".full_notes").hide();   
 $(".partial_notes").show(); <==========  
  
 //toggle the component with class partial_comments   
 $(".partial_notes").click(function()   
 {   
 $(this).next(".full_notes").slideToggle(100);   
 $(this).next(".partial_notes").slideToggle(100);  <==========  
 });   
 });   
  
 <tr class="Row">  
 <td>Notes </td>   
 <td colspan="6">  
 <div class="partial_notes" style="DISPLAY: block">  
 {notes_min}  
 MORE......  
 </div>  
 <div class="full_notes" style="DISPLAY: block">  
 {notes}  
 </div>  
 </td>  
 </tr>  

_________________
Lane
View profile  Send private message
eratech


Posts: 513
Posted: 02/04/2014, 4:38 PM

TK - if you are going to use jQuery, I would suggest you look at the jquery.com site for demos and examples (http://learn.jquery.com) so you can understand how it works and what you might need to change if something goes wrong.

You will rarely get working examples that match your requirements so sometimes you will need to make your own changes.

As for the
notes_min
(to use Lane's label) showing all the text - if I'm reading your comment correctly, you need to trim it down to a partial text (such as changing the label text in the label's Before Show event to show the first 80 characters - see the Manual for Dynamically altering a label text and PHP string functions )

Eric
_________________
CCS 3/4/5 ASP Classic, VB.NET, PHP
Melbourne, Victoria, Australia
View profile  Send private message
kirchaj

Posts: 215
Posted: 02/05/2014, 7:21 AM

Thanks Lane and Eric. You are right and I am going to dig into it today. I'll let you know what I come up with.
View profile  Send private message

Add new topic Subscribe to topic   


These are Community Forums for users to exchange information.
If you would like to obtain technical product help please visit http://support.yessoftware.com.

Web Database

Join thousands of Web developers who build Web applications with minimal coding.
CodeCharge.com

Home   |    Search   |    Members   |    Register   |    Login


Powered by UltraApps Forum created with CodeCharge Studio
Copyright 2003-2004 by UltraApps.com  and YesSoftware, Inc.