This issue appears only in Firefox 14.0.1 (well I couldn't reproduce it in any other browser). If you put the code for Disqus
comments inside an element that is hidden and wait until everything is fully loaded and then display the element using JavaScript, the comment box nor
comments will show up. However if you resize the window, it'll show up immediately. It's working fine in latest version of Google Chrome and Safari though.
What's causing this and how to fix it?
Sample code to reproduce:
<div id="test" style="display:none;">
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'onlinefunctions'; // required: replace example with your forum shortname
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
</div>
<a href="#" onclick="document.getElementById('test').style.display = 'block'">show</a>
I could post a link to a live example but I'm not sure about the policy of posting links here on Stack Overflow.
