Permalink
Browse files

comments lazy loading

  • Loading branch information...
bartaz committed Feb 22, 2010
1 parent 2999b25 commit 43874a7cabef6a94ad65f397d9bf972dfbd38c07
Showing with 48 additions and 26 deletions.
  1. +23 −15 _includes/css/{comments.css → discuss.css}
  2. +3 −3 _layouts/post.html
  3. +1 −1 css/markdownize.css
  4. +2 −2 css/styles.css
  5. +19 −5 js/disqus.js
@@ -1,32 +1,32 @@
/*
- * Comments
+ * Discussion
*/
-#comments {
+#discuss {
background-color: #FFFFFF;
color: #000000;
font-family: Verdana, Arial, sans-serif;
padding: 1em;
}
-#comments a {
+#discuss a {
color: #224466;
text-decoration: none;
}
-#comments a:visited {
+#discuss a:visited {
color: #555666;
}
-#comments a:hover,
-#comments a:focus {
+#discuss a:hover,
+#discuss a:focus {
color: #224466;
background-color: #E4F2FF;
}
-#comments h2,
-#comments h3,
-#comments h4 {
+#discuss h2,
+#discuss h3,
+#discuss h4 {
font-family: Futura,"Century Gothic","URW Gothic L",Helvetica,sans-serif;
font-weight: normal;
text-align: center;
@@ -35,18 +35,26 @@
padding-bottom: 2px;
}
-#comments h2 { font-size:1.5em; }
-#comments h3 { font-size:1.3em; }
-#comments h4 { font-size:1.0em; }
+#discuss h2 { font-size:1.5em; }
+#discuss h3 { font-size:1.3em; }
+#discuss h4 { font-size:1.0em; }
-#comments h2,
-#comments #disqus_thread {
+#discuss p {
+ line-height: 1.4;
+}
+
+#discuss h2,
+#discuss #disqus_thread {
width: 700px;
margin: 0 auto 0.5em;
position: relative;
}
-#comments #dsq-content .dsq-dc-logo {
+#discuss #disqus_thread.loading #dsq-content {
+ display: none;
+}
+
+#discuss #dsq-content .dsq-dc-logo {
position: absolute !important; /* override default disqus style */
right: 0;
}
View
@@ -16,10 +16,10 @@ <h1 class="entry-title"><a href="{{ page.url }}" rel="bookmark" title="Link to t
{{ content | replace:"<!--more-->","<a name='more' id='more'></a>" }}
</div>
-<div id="comments">
- <h2>Comments</h2>
+<div id="discuss">
+ <h2>Discuss</h2>
<div id="disqus_thread">
- <p class="noscript">Comments on this blog are <a href="http://disqus.com">powered by Disqus</a>. JavaScript in your browser is turned off, but you can join <a href="http://disqus.com/forums/itsabodybuildingblog/?id=ref">the discussion thread</a>.</p>
+ <p>Did you like it? Do you have anything to add? <a href="http://disqus.com/forums/itsabodybuildingblog/?id=ref" rel="disqus">Join the discussion</a> and tell us about it, or just check what others have to say.</p>
</div>
</div>
View
@@ -64,7 +64,7 @@ h1.entry-title,
}
-{% include css/comments.css %}
+{% include css/discuss.css %}
/*
View
@@ -308,9 +308,9 @@ body.hentry #content .entry-summary {
margin:0; padding: 0;
}
-{% include css/comments.css %}
+{% include css/discuss.css %}
-#comments {
+#discuss {
width: 800px;
padding: 0 0 50px;
margin: 0 auto;
View
@@ -1,17 +1,31 @@
-// Loads DISQUS comments on a post page
+(function () {
-// include DISQUS when page loaded
-$(document).ready(function(){
- $("#disqus_thread").html("<p class='loading'>Loading comments, please wait...</p>");
+// Loads DISQUS comments on a post page
+loadDisqus = function () {
+ $("#disqus_thread")
+ .addClass('loading')
+ .html("<p class='loading'>Loading comments, please wait...</p>");
$.getScript("http://disqus.com/forums/itsabodybuildingblog/embed.js");
// because disqus doesn't have any reasonable 'loaded' event
// we need to fake it with some polling
var waitForDisqus = setInterval(function () {
if($("#dsq-comments").length > 0) {
- $('#disqus_thread .loading').remove();
+ $('#dsq-content').hide();
+ $('#disqus_thread').removeClass('loading')
+ .find('.loading').remove();
+ $('#dsq-content').slideDown();
clearInterval(waitForDisqus);
}
}, 100);
+
+ return false;
+};
+
+// include DISQUS when page loaded
+$(document).ready(function () {
+ $("#disqus_thread a[rel='disqus']").click(loadDisqus);
});
+})();
+

0 comments on commit 43874a7

Please sign in to comment.