rojcyk
rojcyk

Reputation: 247

Initializing disqus comment in hidden element is stretched after appearing

I am trying to setup my own tumblr theme and I am almost there but this keeps bugging me for quite a while now. Basically I want to have disqus discussion on every article but I want to have it hidden. So when somebody clicks on lets say "Show whole discussion" it appears.

I have whole disqus discussion hiden with simple css:

display: none;

jquery:

$('.disqus').click(function() {
//shows discussion
$("#disqus_thread").animate({ height: 'show', opacity: 'show' }, 'slow');
//hides link
$(".disqus").animate({ height: 'hide', opacity: 'hide' }, 'slow'); 
});

It works just fine when I click before the disqus plugin loads. But If I click after the plugin is loaded it streches for like 700px and stays that way. And so far I could not find out why.

Upvotes: 2

Views: 1292

Answers (1)

owksley
owksley

Reputation: 152

Elements with display: none do not have a defined width - because they are not part of the page layout. This is probably confusing Disqus as it tries to insert itself into the page.

A number of alternatives to display: none (where the element is unseen but still present in layout) are shown here:

http://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/

In my opinion, a better solution would be to load Disqus when needed, rather than allowing it to load and then hiding it. When the user clicks on "Show whole discussion" you can use jQuery.getScript(), or - without jQuery - add the Disqus script tag to the DOM using document.createElement('script').

A blog post on dynamically loading Disqus is here:

http://blog.yjl.im/2012/04/let-your-readers-decide-when-to-load.html

Upvotes: 3

Related Questions