Question

Here’s the problem:

I have couple of pages which gets its content from a database. The content is displayed in a Literal control kept on an asp.net page.

The article sometimes gets quite long so I want to break the content into two parts using a client script. Unfortunately I cannot change the query to pull data partially. The entire data has to come.

What I want is that when the page (http://mysite.com/showpage.aspx?pid=45) or any other page is opened, I show the first 500 words in that literal control. A Link gets generated below the 500 words which says ‘Click Here to View More…’

On clicking this link, a postback occurs and this time the entire content is shown to the user. I understand there is an extra roundtrip required but that’s ok for my users.

How can I create such a functionality? Please help me with the script. Thanks.

Answer 1

i use the following jQuery function to shorten a div of text and add a more button.

http://www.reindel.com/truncate/

Where, in the example below, 120 is the character limit.

Character limit:
An acceptable set of characters
(designated by a regular expression)
to truncate in front of, once the max
has been reached. If an acceptable
character is not found at the max, the
plugin will traverse the string
backwards until one is found. If none
is found, the string will not
truncate. The default value is a
single white space character.

$("#contentDiv").truncate( 120,{
        chars: /\s/,
        trail: [ " ( <a href='#' class='truncate_show'>more</a> . . . )", 
                 "( . . . <a href='#' class='truncate_hide'>less</a> )" ]
    });