Add readmore-js CSS to set overflow and display properties; tweak calculation of heights. Should close #3

1 files changed, 20 insertions, 4 deletions

diff --git a/readmore.js b/readmore.js
index 173a615..590d43e 100644
--- a/readmore.js
+++ b/readmore.js
@@ -13,7 +13,21 @@
         maxHeight: 200,
         moreLink: '<a href="#">Read More</a>',
         lessLink: '<a href="#">Close</a>'
-      };
+      },
+
+      styles = '.readmore-js-section { overflow: hidden; display: block; width: 100%; }\
+.readmore-js-toggle { }';
+
+    (function(d,u) {
+      if(d.createStyleSheet) {
+        d.createStyleSheet( u );
+      }
+      else {
+        var css=d.createElement('style');
+        css.appendChild(document.createTextNode(u));
+        d.getElementsByTagName("head")[0].appendChild(css);
+      }
+    }(document, styles));
 
   function Readmore( element, options ) {
     this.element = element;
@@ -35,13 +49,15 @@
         var current = $(this),
             maxHeight = (current.css('max-height').replace(/[^-\d\.]/g, '') > $this.options.maxHeight) ? current.css('max-height').replace(/[^-\d\.]/g, '') : $this.options.maxHeight;
 
+        current.addClass('readmore-js-section');
+
         if(current.css('max-height') != "none") {
           current.css("max-height", "none");
         }
 
-        current.data("boxHeight", current.height());
+        current.data("boxHeight", current.outerHeight(true));
 
-        if(current.innerHeight() < maxHeight) {
+        if(current.outerHeight(true) < maxHeight) {
           // The block is shorter than the limit, so there's no need to truncate it.
           return true;
         }
@@ -51,7 +67,7 @@
 
         sliderHeight = maxHeight;
 
-        current.css("height", sliderHeight).css("overflow", 'hidden');
+        current.css({height: sliderHeight});
       });
     },