Adding "Show Less" "Show More" feature using jQuery

Requirement:

1. You have a list of dynamically generated p tags on your page and the length of the contents varies abnormally.
2. You want to normalize the length of the content of the p tags to a threshold value of 350 characters.
3. For all the p tags having length greater than 350, the remaining content should be hidden and there should be a link saying ‘… more’.
4. There should be a tolerance limit of 20 characters i.e. if the p tags having length equal to 370 (350 + 20) characters, it should be left as it is.

Method body:

  function SetMoreLess(para, thrLength, tolerance, moreText, lessText) {
            var alltext = $(para).html().trim();

            if (alltext.length + tolerance < thrLength) {
                return;
            }
            else {
                var firstHalf = alltext.substring(0, thrLength);
                var secondHalf = alltext.substring(thrLength, alltext.length);

                var firstHalfSpan = '' + firstHalf + '';
                var secondHalfSpan = '' + secondHalf + '';
                var moreTextA = '' + moreText + '';
                var lessTextA = '' + lessText + '';

                var newHtml = firstHalfSpan + moreTextA + secondHalfSpan + lessTextA;

                $(para).html(newHtml);
            }
        }

Step 1: add class “summary” to the p tag(s) Step 2: Iterate over all p tags and call the above function SetMoreLess like this.

  SetMoreLess($(this).find("p.summary"), 350, 20, " ... more", " ... less");

Step 3: bind ShowMore and ShowLess click events ( in page_load or $(document).ready())

   
            $("a.moreText").click(function () {
                $(this).hide();
                var pTag = $(this).parents("p.summary");

                $(pTag).find("a.lessText").show();
                $(pTag).find("span.secondHalf").show();
            });

            $("a.lessText").click(function () {
                $(this).hide();
                var pTag = $(this).parents("p.summary");

                $(pTag).find("a.moreText").show();
                $(pTag).find("span.secondHalf").hide();
            });

Step 4: add css styles used in the code

      
        a.moreText
        {
            color: blue;
            cursor: pointer;
            padding-left: 5px;
            padding-right: 10px;
        }
        
        a.lessText
        {
            cursor: pointer;
            color: blue;
            display: none;
            padding-left: 5px;
            padding-right: 10px;
        }
        
        span.secondHalf
        {
            display: none;
        }

Download example here.

My new repository at GitHub - Custom AJAX Extenders

Check out my new repository jQExtenders. It includes some custom ASP .Net AJAX Extenders built to make use of some commonly used javascript functionality and jQuery plugins. Currently it has SelectAllCheckBox and ListComplete extenders and I plan to add more in the near future.

https://github.com/danish160/jQExtenders .

Issue with preventing postback from client side (RadComboBox SelectedIndexChanged event)

I was doing some validation with a button on client side and if it failed, wanted to prevent from postback. This worked fine with button and client side event, by something like,

Approve

Here, WarningForIncreasingLimit() fires a confirmation dialog box and if the result is cancel, we return “false” hence preventing postback.
Here is the body,

function WarningForIncreasingLimit() {
               if (/*some calculation logic here*/) {
                   result = confirm("Some confirmation message, are you sure you want to continue?");
               }
               else {
                   result = true;
               }
       }

But it does not work when you use a RadComboBox with OnClientSelectedIndexChanged event.
I had a client event like

function radCmbMoveToClientChaneged(sender, eventArgs) {
           if (successful logic here)
               return true;
           else {
               var result = WarningForIncreasingLimit();
               return result;
           }
       }

Even if WarningForIncreasingLimit() above returns false, the method won’t prevent postback.
After some r&d , I figured that you have to the changing event instead on changed and set proper in set_cancel method like this.

function radCmbMoveToClientChanging(sender, eventArgs) {
           if (successful logic here)
               return true;
           else {
               var result = WarningForIncreasingLimit();

               if (!result) {
                   eventarqs.set_cancel(true);
               }

               return result;
           }
       }