menu

Thursday, 28 August 2014


Limited Text Show…


<HTML>
<HEAD>

<title>Limited Text Show</title>

<script type="text/javascript" src="jquery-latest.js"></script>
    
<STYLE>

.comment {
     width: 400px;
     background-color: #f0f0f0;
     margin: 10px;
}
a.morelink {
     text-decoration:none;
     outline: none;
}
.morecontent span {
     display: none;

}
</STYLE>
<SCRIPT>
$(document).ready(function() {
     var showChar = 12;
     var ellipsestext = "";
     var moretext = "...";
     var lesstext = ".";
     $('.more').each(function() {
           var content = $(this).html();

           if(content.length > showChar) {

                var c = content.substr(0, showChar);
                var h = content.substr(showChar-1, content.length - showChar);

                var html = c + '<span class="moreelipses">'+ellipsestext+'</span>&nbsp;<span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">'+moretext+'</a></span>';

                $(this).html(html);
           }

     });

     $(".morelink").click(function(){
           if($(this).hasClass("less")) {
                $(this).removeClass("less");
                $(this).html(moretext);
           } else {
                $(this).addClass("less");
                $(this).html(lesstext);
           }
           $(this).parent().prev().toggle();
           $(this).prev().toggle();
           return false;
     });
});
</SCRIPT>


</HEAD>
<BODY>



<div class="comment more">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
     Vestibulum laoreet, nunc eget laoreet sagittis,
     quam ligula sodales orci, congue imperdiet eros tortor ac lectus.
    
</div>


</BODY>

</HTML>


Download Source Code


No comments:

Post a Comment