For the past week, I've been working on a new Tumblr widget on the Dixwell Dossier, a semantic wiki for my NaNoWriMo project. Part of it is based on this JSFiddle experiment brought up in another Stack Overflow question.
Current code:
<script type="text/javascript">
function growDiv() {
var growDiv = document.getElementById('grow');
if (growDiv.clientHeight) {
growDiv.style.height = 0;
} else {
var wrapper = document.querySelector('.measuringWrapper');
growDiv.style.height = wrapper.clientHeight + "px";
}
document.getElementById("more-button").value=document.getElementById("more-button").value=='More'?'Less':'More';
}
</script>
<style type="text/css">
.three-col {
-moz-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
}
div iframe {width: 100%}
#more-button{border-style:none;background:none;font-size:16px;font-family:Merriweather;font-weight:bold;color:blue;margin: 0 0 10px 0;}
#grow input:checked{color:red;}
#more-button:hover{color:black;}
#grow {
-moz-transition: height 1.5s;
-ms-transition: height 1.5s;
-o-transition: height 1.5s;
-webkit-transition: height 1.5s;
transition: height 1.5s;
height: 800px;
overflow: hidden;
}
</style>
<div style="font-size: 125%; font-family: Verdana; border-radius: 5px; background-color: <!--{$bgcol|escape:'html'|default:'#780099'}-->; color: <!--{$textcol|escape:'html'|default:'white'}-->; margin-bottom: 8px; padding: 0.8em">The latest posts from <b><!--{$site|escape:'quotes'|default:'yahoo'}--></b> on Tumblr</div>
<div id='grow'>
<div class='measuringWrapper'>
<div class="three-col">
<script type="text/javascript" src="http://<!--{$site|escape:'quotes'|default:'yahoo'}-->.tumblr.com/js?num=15"></script>
</div>
</div>
</div>
<input type="button" onclick="growDiv()" value="⬇ More" id="more-button">
<div style="font-family: Verdana; border-radius: 5px; background-color: #6aa5cf; color: white; padding: 0.5em"><span class="plainlinks"><b>Never miss a post!</b> <a href="https://www.tumblr.com/register/follow/<!--{$site|escape:'html'|default:'yahoo'}-->"> Follow <b><!--{$site|escape:'quotes'|default:'yahoo'}--></b> now</a> • <a href="https://www.tumblr.com/">Sign in</a></span><span style="float: right">Powered by <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/Tumblrfull.svg/50px-Tumblrfull.svg.png" alt="Tumblr logo"/></span></div>
Everything's going to plan, except for one little thing: The first time I click "More", the text area shrinks back up and hides the posts. Only on the next click can I see all the posts; third click, and it hides everything back. Instead, they should go down and reveal the rest of the content, and go back to the original 800px height on next click.
Basically, what I want is:
↓ More (800px) → Less (100%) → More (800px),
not
↓ More (800px) → More (0) → Less (100%).
As it stands, I'm withholding further edits till I can get a solution here. Fixes, anyone?
(P.S. If you want to test this in the Dossier's Sandbox, you my have to wait a while: at this writing, Referata's servers are in slowdown mode. Code to use while editing:
{{#widget:tumblr}})
Well, that's how you've programmed it to work. Right at the top of your code, you have:
if (growDiv.clientHeight) {
growDiv.style.height = 0;
} else {
var wrapper = document.querySelector('.measuringWrapper');
growDiv.style.height = wrapper.clientHeight + "px";
}
In the if statement, you're checking growDiv.clientHeight. If it's non-zero (and thus true), you're setting the height of the element to zero, otherwise you're setting it to equal the height of the .measuringWrapper div.
Now, you could simply replace the condition with, say, if (growDiv.clientHeight > 800), and set the height to "800px" instead of 0 if the condition is true. This would behave in funny ways if the height of the measuring wrapper was less than 800 px, though, so you might want to check for that first and treat it as a special case (perhaps disabling and hiding the button entirely).