javascript readmore function?

Question

Here is html :

<div class="wrapper">
<div class="small">
    <p>Lorenter code hereem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div> <a href="#">Click to read more</a>

Here is css :

.small {
    height: 20px;
    overflow:hidden;
}
.big {
    height: auto;
}

Here is javascript :

$('.wrapper').find('a[href="#"]').on('click', function (e) {
    e.preventDefault();
    this.expand = !this.expand;
    $(this).text(this.expand?"Click to collapse":"Click to read more");
    $(this).closest('.wrapper').find('.small, .big').toggleClass('small big');
});

the problem is it always show the click for expand although some of my text( which genarate from php nevermind that) is really short and dont need that readmore function

so pls anyone can come up with some height condition so that they dont display the click to read more when the text is under certain height

Here is a sample FIDDLE : http://jsfiddle.net/mWcmg/302/

I would use PHP to only generate the "read more" link if the text has been truncated. — showdev, Aug 04 '15 at 16:33
You might be interested in : http://jedfoster.com/Readmore.js/ — Anwar, Aug 04 '15 at 16:33
i would love to hear about a js solution because i dont really want to touch that messy text that they generate from database into a bunch of
already have a look at jedfoster and counter same problem and i don't really have enough time to analyze that — TuanAnh, Aug 04 '15 at 16:38
check this question: [Duplicate question][1] [1]: http://stackoverflow.com/questions/5270227/how-to-hide-show-more-text-within-a-certain-length-like-youtube — Rohit Batta, Aug 04 '15 at 16:44

dhouty · Answer 1 · 2015-08-04T16:53:15.693

1

Here is what you are looking for:

$('.wrapper').each(function() {
    var content = $(this).find('.small');
    var expand = $(this).find('a[href="#"]');
    if (content.height() < 200) {
        expand.hide();
    } else {
        expand.click(function() {
            content.toggleClass('small big');
        });
    }
});

edited Aug 04 '15 at 16:53

answered Aug 04 '15 at 16:48

dhouty

1,969
12
21

score 1 · Accepted Answer · answered Aug 04 '15 at 16:49

1

if ($('.small').height() < 300) {
  $('a').css({'visibility': 'hidden'});   
}

I just added this to the bottom of your script. You can check the height of the small div and hide the 'a' tag if it's height is below some thereshold

answered Aug 04 '15 at 16:49

Scott Schwalbe

430
2
4

tks for the solution now i have to work this into an actual solution for my case – TuanAnh Aug 04 '15 at 17:04
after a while testing i found that it work well on normal text generated from php but for some reason that some text generate with php foreach don't work maybe i have to look for some solution in php – TuanAnh Aug 04 '15 at 17:47

score 0 · Answer 3 · edited Aug 04 '15 at 17:21

0

Using element.offsetHeight, element.offsetWidth , element.scrollHeight and element.scrollWidth you can determine if your element has content bigger than its size:

if (element.offsetHeight < element.scrollHeight ||
    element.offsetWidth < element.scrollWidth) {
    // your element have overflow
} else {
    // your element doesn't have overflow
}

edited Aug 04 '15 at 17:21

tony gil

9,424
6
76
100

answered Aug 04 '15 at 16:53

Erick Lanford Xenes

1,467
2
20
34

javascript readmore function?

3 Answers3