Currently, when we specify maxHeight, it truncates at exact pixel, and causes problems with showing a horizontally cut sentence. (upper half of the characters are displayed).

Wont it make sense to add maxChars as an input, where we specify the number of characters to cut at ?

Hey,

I would like to make this work for jQuery 1.4.4. Do you have some clues of what I should change?
For now I see that I'll need to replace on() with live().

Thanks

Email from user:

I have a feature request for your superb plugin. It would be great if it allowed you to adjust the maxHeight for responsive designs. Say, between desktop/tablet/smartphone I might want the maxHeight to jump from 200/100/50. -Alex

I think this should "just work", since the JS checks if the element has a max-height property, but this should be tested.

Hi i have a problem with display block.
When - site is started - I see block/button with - see more. After clik - button disappears - is only text - close. After click on close - i ddint have a button - only text - see more.
After reloaded - i see button - read more.
What hapen ?

The minified version (downloaded on 10/9/2013) doesn't work with IE8. An "Unexpected call to method or property access" is thrown and it prevents scripts loaded after it from working. If I replace it with the "source" version, IE8 doesn't encounter any errors.

NOTE: I used Google's Closure Compiler to minify. The resultant code runs on IE8 without errors.
http://closure-compiler.appspot.com/home

I'm using this nice little plugin on a WP theme. It's working great on Chrome. But when previewing it on Firefox the animation gets real choppy and the page freezes. I suspect a jquery/javascript conflict with maybe another plugin. Though it's ok in Chrome. Anybody had this issue? Any advice here. I might have to look for an alternative approach. Here's the url if you want to have a look:
http://stag.cubismgroup.com/about/team/
Thanks in advance,
Kurt

Im triyng to put links to the articles, with a:link a:visited, but dont works. Could you help me?

http://osvaldohernan.besaba.com/codigos/leiamaisteste.html

Osvaldo

Hi,

love your plugin. Very well designed.

I was wondering, if there is a way to reduce the amount of text on the last line so that the anchor for reading the rest could be on that line. And thus not creating a new line.

Any help or ideas in that direction would be great.

Thx and cheers,

andrej

I'd like a way of listening any window resizing in order to achieve a full consistency of the effect. Maybe a parameter like the one included in the dotdotdot plugin:
$(".ellipsis").dotdotdot({
watch: "window"
});

I'm making a small change to my forked project to handle cases where the expanded size is just barely outside of the maxHeight. Two questions:

• How do you prefer pull requests are made? I'm not seeing a development branch; do you just want it submitted to master branch?
• Do you have a particular minifier you want used?

Related with #6 .
The problem comes if nit plugin with .readmore() and then change content and again init with .readmore()

When collapsing, the window should scroll back where the now "read more" button is.

Does not work, if the content is displayed after the page loads.

Like this.

$(window).load( function() {
$('#loader').hide();
$('#content').fadeIn();
});

I love your plugin, just found a little tweak it could use if possible? Basically in dealing w/ Responsive sites.

If lets say you load a page with the plugin. It only calculates the initial HEIGHT of the collapsed and then the expanded text. So if you load it at desktop size, it will work fine. Now if you take the browser and scale it down to let's say 600px the plugin will only expand to that original HEIGHT and not the new height that the text would take up. Follow?

Example:
http://www.ryan-belisle.com/clients/picnet/soapbox/prototypes/soapbox-petitions/converted-html/pages/page-default(1col).html

Load that up, shrink your browser to about 740px width and you'll see the plugin come into effect. Hide/Expand the text. Now shrink the browser more to about 500px and you'll see what I mean.

On chrome, firefox, and IE 8 & 9(Have not tested 10), the Read more function expands to just under the full height of the content block. I've struggled to replicate it but it happens usually when my browser is in fullscreen and I refresh, then reduce the width of my browser to roughly 800px(half the screen), then refresh again. After refreshing it the second time the bug seems to occur but I can also sometimes get it to occur when the browser is the width of the full screen as seen in the image. Sorry that that is all the information I can give i've plaid around with it for a while and no idea where the issue is coming from.
Appreciate the awesome work you have done!
-Yuval

Hi Jed,
When I tested this on my site, the expanded section height is stuck at 758, which is cutting off the content on one of my articles--I attached a screenshot of the code from Firebug. I tired several different places to change this, but I don't understand where that value is coming from. Please let me know how I can customize the maximum height value for the expanded section.

The class reference that I see for the section in Firebug is combining two classes. I tried emulating that in my stylesheet, but it had no effect.

Thanks!

Jeremy

Hi, thanks for this great plugin! I have it functioning well right now, but for some reason the calculated height for the expanded text is not right and my text is getting cut off when expanded.

Here's what it looks like:
http://s17.postimg.org/8iwj0i3rz/Screen_Shot_2014_05_19_at_5_30_28_PM.png

The issue seems to be with my custom webfont, OpenSans. If I use the custom font, I experience this issue, but if I remove font specification from the CSS it works as expected. Any ideas on how to resolve this?

I want to use Readmore.js with AngularJS. It works partially only with the initial/default values. I can't pass options.

I've tried it with Angular-UI jQuery Passthrough (http://angular-ui.github.io/ui-utils/#/jq)

<div id="disclaimer" ui-jq="readmore">
[...]

.value('uiJqConfig', {
        // The jQuery Plugin namespace
        readmore: {
            // Readmore options. This object will be used as the defaults
            speed: 1000,
            embedCSS: false,
            moreLink: '<div class="horizontal-line"><span class="line-center arrow-down">Kompletten Disclaimer anzeigen</span></div>',
            lessLink: '<div class="horizontal-line"><span class="line-center arrow-up">Disclaimer schließen</span></div>'
        }
    })

But only the default values are applied ('Read more', 'Close').

And I also developed a directive by myself:

<div id="disclaimer" bs-readmore>
[...]

.directive('bsReadmore', ['$log',
            function ($log) {
        return {
            link: function (scope, element, attrs) {
                //$log.log(scope, element, attrs);
                $(element).readmore({
                    speed: 1000,
                    embedCSS: false,
                    moreLink: '<div class="horizontal-line"><span class="line-center arrow-down">Kompletten Disclaimer anzeigen</span></div>',
                    lessLink: '<div class="horizontal-line"><span class="line-center arrow-up">Disclaimer schließen</span></div>'
                });
            }
        };
    }])

Same behavior as before. My Options won't be applied.

Is there some magic, which I didn't see?

There's simply no Read More link when viewed in IE10. See your demo site (http://jedfoster.github.io/Readmore.js/) for a reproduction.

All content is displayed instead of the cutdown text with Read More links.

The previous commit works in IE10.

Haven't checked any other versions of IE, but latest FF, Opera, Chrome & Safari are OK.

Cheers,

I have a large image on a page which I have the readmore.js. When you land on the page, the content that needs to be hidden, is displayed until the page is loaded (or maybe half way), then that's the only time that it hides. I don't like my users to see the content unless they click on the read more button. How can I do this?

I'm trying to to activate Readmore.js at a specific, different location on each page.
Would it be possible to place an anchor in the text and activate readmore at that location?

The code does not work with minified version of plugin, but the same code works perfectly with debug version. Have a

I totally love your script and using it here: http://delicatr.ru/
But sometimes there is a problem with expanding posts, which contains one or more video from youtube (i think, bug will appear with every iframe tag) or (not every time) images. How can I repair this thing?

Thanks in advance.

I've implemented this on a few sites, but I've noticed that for some reason in Chrome it MUST be something like

<article>
...
</article>
<script src="http://jedfoster.com/js/jquery-1.8.2.js"></script>   
<script src="http://jedfoster.com/js/readmore.min.js"></script>    
<script>
$('article').readmore({
maxHeight: 0
});
</script>

while in any other browser I can use anything I want like 'expand or 'wee' and it works fine, as long as it's consistent. Is this intentional or a bug?

I have a problem with correct height calculation in Google Chrome. Most of usage case work fine, but when in 'article' are tables there is a problem. Have you any solutions? :)

Example: http://new.autoid.pl/produkty/automatyczna-identyfikacja-osob/rejestratory-czasu-pracy/166-virdi-ac-1000.html

I'd really like this feature (condition: true/ false) - maybe achievable by adding a global variable/ flag? thanks for a great plugin! - sorry, turned out this is a duplicate of #27

I used this plugin to hide advanced inputs and let user click the 'price detail...' link to expand further inputs or textareas, as follows:

when users click 'tab' button:


the bug appears: the input will show the next already collapsed textarea unexpectedly.
it is quite common that users click 'tab' to proceed to next input.

Any solutions or bugfix scheduled for this?

Thanks in advance.

I was wondering if you could implement the feature so a new class would render in addition to the 'readmore-js-section' class?

Basically it be nice to be able to style the shortened text and the full expanded text individually and I don't think there is a way to do that right now.

So on the shortened text maybe the class reads:
'readmore-js-section is-collapsed'

and after you click on the moreLink the class changes too:
'readmore-js-section is-expanded'

Thoughts?

Is that possible to have the first item always open? How I can achieve that using this script? Any ideas?

Email from user:

Hi Jed, Thank you for contributing readmore.js for toggling read more/read less articles. Is there any opportunity that this nice, little js will run on IE 9 and newer? Unfortunately I´m not soooo familiar with javascript. Thanks in advance, Sven

See also #5. These look related.

Hi,

If I have calls like these on the same page:

$('#111').readmore({maxHeight: 100});
$('#222').readmore({maxHeight: 50});

It does seem like the maxHeight value for the last function call will be dominant.

When the page loads, #111 is showing at height 100. No problem.

But when you click "Read More" and then "Read Less", #111 will shrink to height 50 instead of 100.

Hi Jed-

I was wondering if there's a way to unset or destroy the Readmore functionality as applied to a particular text element. I have a case where I'm dynamically changing the text inside and and looking to conditionally toggle the readmore link. Thanks.

Not sure if this is an issue, or I just missed that part, but needed to set the wrapping element as display: block; for the plugin to be able to calculate it's height. Maybe it's something that could be done through the plugin¿?
Also, if the child element has vertical margins, the height is not calculated properly.

Hw, thanks for the plugin :)

Currently I need to set Read More on a block of text which has display set as inline. Using this plugin, automatically overrides the display to block which breaks the layout.

Hey Jed. I've successfully installed readmore.js on my site page but there appears to be a bug where the section i've assigned for expansion only expands part way, leaving the rest of the text hidden. I'm not sure what I did wrong. Please help.

I wasn't sure if this is possible due to the link appearing in a new div. The ability to make it appear right after the text would be very valuable.

Can it be confirmed if this is possible currently or in the future?

It appears that readmore.js sets the element in question as a block element. I think inline should be an option as well. At the moment, it appears that it switches it to a block element if I use sectionCSS to make it inline.

Hey Jed

Is there any chance you think of getting this working for ie8?
Love the plugin btw! Thank you.

Hello,
I try to apply readmore in drupal installation, and when I test script in my chrome console I get this error:
TypeError: undefined is not a function
Would you help me please ? Thank you.

Hello,

I am loving your readmore.js but I was wondering if there was a way that I could set it so that when 1 panel is opened, other open panels automatically close. Also I would like to adjust the placement of the "Read More" text but currently when I adjust the placement and width it adjust the width of the whole panel not just the "Read More" text.

Thanks

I am trying to use javascript to dynamically set the content of a div element for which the jquery readmore link is configured. This functionality does not appear to work. I may be way off based and completely missed something trivial here, but have spent hours... Any help is greatly appreciated.

I have created a prototype that illustrates this behavior. Please see the uploaded snippet

<link rel="stylesheet"
    href="css/jqueryui/jquery-ui-1.10.1.custom.css" type="text/css" />



<script type="text/javascript" src="js/jqueryui/jquery-1.9.1.js"></script>
<script type="text/javascript"
    src="js/jqueryui/jquery-ui-1.10.1.custom.js"></script>



<!--  readmore js -->
<script type="text/javascript" src="js/readmore.min.js"></script>

<script>
    $(function() {
        $("#esdesc").readmore({
            speed : 1000,
            maxHeight : 100
        });

        $("#etdesc").readmore({
            speed : 1000,
            maxHeight : 100
        });
        $("#edesc").readmore({
            speed : 1000,
            maxHeight : 100
        });

    });

    $(function() {

        $("#popup1").button().click(function() {
            msg = "<p>Salvia portland leggings banh mi fanny pack mixtape,authentic bushwick wes anderson intelligentsia artisan typewriter high life they sold out mixtape high life. Marfa ethnic wayfarersbrooklyn keytar mixtape. Blue bottle shoreditch gluten-free,mixtape hoodie whatever pinterest viral twee fashion axe high life irony biodiesel tofu.</p><p>Retro church-key thundercats keytar, skateboard ironyselvage ethnic freegan banjo pour-over fixie. Raw denim fashion axeoke locavore disrupt, tonx retro authentic letterpress raw denimstumptown mixtape ugh kale chips flexitarian 90's deep v. Squid fingerstache bespoke wolf DIY. Banjo pour-over shoreditch cardigantry-hard.</p>";

            document.getElementById("etdesc").innerHTML = msg;

            $("#dialog1").dialog("open");
        });

        $("#dialog1").dialog({
            autoOpen : false,
            height : 500,
            width : 800,
            modal : true,
            buttons : {
                "OK" : function() {

                },
                "Cancel" : function() {
                    $(this).dialog("close");

                }
            }

        });
        $("#popup2").button().click(function() {

            $("#dialog2").dialog("open");
        });

        $("#dialog2").dialog({
            autoOpen : false,
            height : 500,
            width : 800,
            modal : true,
            buttons : {
                "OK" : function() {

                },
                "Cancel" : function() {
                    $(this).dialog("close");

                }
            }
        });


    });
</script>


</head>
<body>

    <h3>Readmore Example</h3>

    <table width="600px">
        <tr>
            <td>

                <div id="esdesc">
                    <p>Salvia portland leggings banh mi fanny pack mixtape,
                        authentic bushwick wes anderson intelligentsia artisan typewriter
                        high life they sold out mixtape high life. Marfa ethnic wayfarers
                        brooklyn keytar mixtape. Blue bottle shoreditch gluten-free,
                        mixtape hoodie whatever pinterest viral twee fashion axe high life
                        irony biodiesel tofu.</p>

                    <p>Retro church-key thundercats keytar, skateboard irony
                        selvage ethnic freegan banjo pour-over fixie. Raw denim fashion ax
                        eoke locavore disrupt, tonx retro authentic letterpress raw denim
                        stumptown mixtape ugh kale chips flexitarian 90's deep v. Squid
                        fingerstache bespoke wolf DIY. Banjo pour-over shoreditch cardigan
                        try-hard.</p>

                    <p>Skateboard artisan bicycle rights next level vinyl cardigan
                        beard twee, farm-to-table truffaut. Shoreditch freegan cliche
                        thundercats, bushwick VHS intelligentsia selfies ethnic try-hard
                        before they sold out. Marfa terry richardson hella, seitan odd
                        future pug butcher. Wes anderson tousled YOLO cardigan. Typewriter
                        high life carles, artisan gentrify messenger bag single-origin
                        coffee truffaut thundercats cray 90's pour-over seitan. Banksy
                        8-bit organic, salvia gentrify stumptown wayfarers. Godard echo
                        park before they sold out chambray, skateboard twee mcsweeney's
                        synth hella.</p>

                    <p>Flannel pinterest Austin twee narwhal, hoodie swag wolf
                        photo booth. Hella kale chips marfa occupy pitchfork put a bird on
                        it. Semiotics dreamcatcher selfies beard DIY umami craft beer 3
                        wolf moon. Try-hard literally mustache polaroid ennui VHS. High
                        life fixie wolf, trust fund twee seitan pinterest blog helvetica
                        sriracha. Tattooed selvage try-hard, biodiesel banjo direct trade
                        echo park kogi tonx bespoke. Pork belly put a bird on it iphone,
                        fixie literally bespoke tonx butcher +1 swag.</p>
                </div></td>
        </tr>
    </table>
<br>
<h3>JQueryUI Modal Dialog Example</h3>
<br>
    <button id="popup2">It Works</button>
    <button id="popup1">It NoWorky</button>


    <div id="dialog1">

    <table width="550px">
        <tr><td> <b>In my prod code I am populating the div with the content of a TinyMCE editor</b>
        <p>Here javascript is writing dynamically the div using innerHTML attribute</p>


        </td></tr>
        <tr>
            <td>

                <div id="etdesc">
                </div></td>
        </tr>
    </table>
    </div>

    <div id="dialog2">

    <table width="550px">
            <tr><td> <b>This is static HTML... all good.</b>

        </td></tr>
        <tr>
            <td>

                <div id="edesc">
                        <p>Skateboard artisan bicycle rights next level vinyl cardigan
                        beard twee, farm-to-table truffaut. Shoreditch freegan cliche
                        thundercats, bushwick VHS intelligentsia selfies ethnic try-hard
                        before they sold out. Marfa terry richardson hella, seitan odd
                        future pug butcher. Wes anderson tousled YOLO cardigan. Typewriter
                        high life carles, artisan gentrify messenger bag single-origin
                        coffee truffaut thundercats cray 90's pour-over seitan. Banksy
                        8-bit organic, salvia gentrify stumptown wayfarers. Godard echo
                        park before they sold out chambray, skateboard twee mcsweeney's
                        synth hella.</p>

                    <p>Flannel pinterest Austin twee narwhal, hoodie swag wolf
                        photo booth. Hella kale chips marfa occupy pitchfork put a bird on
                        it. Semiotics dreamcatcher selfies beard DIY umami craft beer 3
                        wolf moon. Try-hard literally mustache polaroid ennui VHS. High
                        life fixie wolf, trust fund twee seitan pinterest blog helvetica
                        sriracha. Tattooed selvage try-hard, biodiesel banjo direct trade
                        echo park kogi tonx bespoke. Pork belly put a bird on it iphone,
                        fixie literally bespoke tonx butcher +1 swag.</p>

                </div></td>
        </tr>
    </table>
    </div>


</body>

Hey!
Thanks for a really nice plugin.
Have a question regarding the collapsed/shortened box of text with the "Read more" link. Is there a way to add a "..." or similar to the last word?
Have tried with $('a.readmore-js-section').append('...'); without success. Not really a jQuery pro as you might have guessed.

Peace

I can't figure out why, but in the expanded view on one section, the text is cut off. If I resize to a smaller screen dimension, this one is fixed as you can see here:

however, it breaks another one that was working at full size. Can you help me figure out why this is?

The plugin doesn't seem to work on Firefox 22.

On the demo page: http://jedfoster.github.io/Readmore.js/, on click on 'Read More' I am being sent to the top of the page without even having the text expanded.

Works on Chrome for me.

Hi everyone,

Currently building a website using Foundation 5. I have tried a ton of expander, truncate, and read more plugins. None of them play nice with Foundation. Some remove line heights, others break accordions and tabs. Readmore.js is the only one that doesn't break all the functionality. My question is that I have some divs that have images floating in them and when the text is collapsed, you can see the top of the image. Is there a setting or a workaround to keep the images hidden until the readmore div is expanded.

Any help would be appreciated tremendously!

I am using readmore.js on the comments of a blog page that has several hundred comments. Each comment has an expand/collapse link and most comments are very large walls of text. (unfortunate I know but hey!!)

It seems like displaying this page is extremely taxing on the browser - apart from the obvious large number of comments load time, I've found an issue when using the JS profiler on chrome.
It seems like when rendering the page after DOMContentLoaded it spends a huge amount of time recalculating style. Here is a stack trace of one such call.

151.896 ms Rendering
Self Time: 151.896 ms
Start Time: 4.02 s
Nodes that need layout: 7526
Layout tree size: 7526
Layout scope: Whole document
Layout root: #document
Layout invalidated:
a.getComputedStyle.Kb @ jquery.js?ver=1.11.0:3
n.extend.css @ jquery.js?ver=1.11.0:3
(anonymous function) @ jquery.js?ver=1.11.0:3
n.access @ jquery.js?ver=1.11.0:3
n.fn.extend.css @ jquery.js?ver=1.11.0:3
(anonymous function) @ mycustom-page-1:774
n.extend.each @ jquery.js?ver=1.11.0:2
n.fn.n.each @ jquery.js?ver=1.11.0:2
Readmore.init @ mycustom-page-1:772
Readmore @ mycustom-page-1:764
(anonymous function) @ mycustom-page-1:885
n.extend.each @ jquery.js?ver=1.11.0:2
n.fn.n.each @ jquery.js?ver=1.11.0:2
$.fn.(anonymous function) @ mycustom-page-1:879
(anonymous function) @ mycustom-page-1:899
j @ jquery.js?ver=1.11.0:2
k.fireWith @ jquery.js?ver=1.11.0:2
n.extend.ready @ jquery.js?ver=1.11.0:2
K @ jquery.js?ver=1.11.0:2
Layout forced:
n.cssHooks.(anonymous function).get @ jquery.js?ver=1.11.0:3
n.extend.css @ jquery.js?ver=1.11.0:3
(anonymous function) @ jquery.js?ver=1.11.0:4
n.access @ jquery.js?ver=1.11.0:3
n.fn.(anonymous function) @ jquery.js?ver=1.11.0:4
Readmore.setBoxHeight @ mycustom-page-1:841
(anonymous function) @ mycustom-page-1:781
n.extend.each @ jquery.js?ver=1.11.0:2
n.fn.n.each @ jquery.js?ver=1.11.0:2
Readmore.init @ mycustom-page-1:772
Readmore @ mycustom-page-1:764
(anonymous function) @ mycustom-page-1:885
n.extend.each @ jquery.js?ver=1.11.0:2
n.fn.n.each @ jquery.js?ver=1.11.0:2
$.fn.(anonymous function) @ mycustom-page-1:879
(anonymous function) @ mycustom-page-1:899
j @ jquery.js?ver=1.11.0:2
k.fireWith @ jquery.js?ver=1.11.0:2
n.extend.ready @ jquery.js?ver=1.11.0:2
K @ jquery.js?ver=1.11.0:2
Warning:
Forced synchronous layout is a possible performance bottleneck.

Is it possible that setBoxHeight is somehow messing up. Ideas how to fix this?

I can get it work. I get read more text and it is sliding down the block div is not expanding and the text is on the top of the next div and close button is not working. I just don't know why.
Anyone with that problem?

Currently the integer entered for maxHeight is px. It would be much more flexible to allow other units like em