jedfoster / Readmore.js

A lightweight jQuery plugin for collapsing and expanding long blocks of text with "Read more" and "Close" links.
http://jedfoster.com/Readmore.js/
MIT License
1.5k stars 722 forks source link

Dynamic content #24

Closed mzf closed 10 years ago

mzf commented 10 years ago

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

jedfoster commented 10 years ago

Could you please post an example of your code?

mzf commented 10 years ago

code example and my solution https://gist.github.com/web777/7364698

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

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

  <style media="screen">
    body { font: 16px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif; color: #444; }
    code { color: #777; font-family: "Source Code Pro", "Menlo", "Courier New", monospace;}
    a { color: #178DB1; }
  </style>
</head>

<body>
  <h3>Dynamically Added Readmore Example</h3>

  <div id="dialog1">
    <table width="550px">
      <tr>
        <td>
          <b>Dynamically added content will appear below when you click this button: 
          <button href="#" id="popup1">Make some content!</button>
          <button href="#" id="popup2">Make another length content!</button>
          </b>
        </td>
      </tr>
      <tr>
        <td>
          <div id="etdesc"></div>
        </td>
      </tr>
    </table>
  </div>

  <!-- <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> -->
  <script src="jquery.js"></script>

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

  <script>
    $('#popup1').on('click', function(event) {

      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>";

      $('#etdesc').html(msg).readmore({
        speed : 1000,
        maxHeight : 100
      });
    });

    $('#popup2').on('click', function(event) {

      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.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>";

      $('#etdesc').html(msg).readmore({
        speed : 1000,
        maxHeight : 100
      });
    });
  </script>
</body>
</html>
philbarresi commented 10 years ago

This would also make it far easier to use with MVVM platforms such as knockout, as your content isn't always ready when you set up the bindings and can easily change.

jedfoster commented 10 years ago

I think this has been fixed with 1fb6a56. Basically, Readmore needs to be removed from the element before it can be init'd again.