Search

Wednesday, October 14, 2015
0 comments

Facebook see more button using JQuery

9:01 AMWednesday, October 14, 2015
Introduction
In this article i will show you how to show 100 characters only from lots of words and remaining words or you can say characters are hide from see more words, just like facebook.com.  In facebook.com website, when we post some article which is lengthy in words then facebook.com functionality hide words just after specified length behind the see more links. Now, today i will give an example of it.


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Facebook See More and See Less</title>
    <script src="Scripts/jquery-1.10.2.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
        var sChar = 100;
        var ellipsestxt = "...";
        var moretext = "more";
        var lesstext = "less";
        $('.more').each(function () {
            var content = $(this).html();

            if (content.length > sChar) {

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

                var html = c + '<span class="moreellipses">' + ellipsestxt + '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="facebookmorelink">' + moretext + '</a></span>';

                $(this).html(html);
            }

        });

        $(".facebookmorelink").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>
    <style>
        a {
            color: #0221ac;
        }

            a:visited {
                color: #02abcd;
            }

            a.facebookmorelink {
                text-decoration: none;
                outline: none;
            }

        .morecontent span {
            display: none;
        }

        .facebookseemore {
            width: 400px;
            background-color: #f0f0f0;
            margin: 10px;
        }
    </style>
 
</head>
<body>
    <div class="facebookseemore more">
<h1>Health Tips</h1>

        Fat on face or double chin suits on a person till a limited age only.
         As age of a person increases fat free face is considered more beautiful.
         Some girls do not like their fatty cheeks because it makes them look fat.
         Fat on face can increase because of many reasons like lack of water, presence
         of fat in diet and other fatty products. And for hiding it you may do make up
         but it is not the thing which gets hided easily. Today
        we are going to tell you about some such tips which can reduce fat from your face at a great extent.


    </div>
 
</body>
</html>
Code Generate the following output
Facebook see more button using JQuery


Protected by Copyscape Online Copyright Protection Software

0 comments :

Post a Comment

 
Toggle Footer
Top