I am faced with a challenge on my webpage where elements within a single class have varying heights based on the size of their text content. To address this, I need to increase the height of all these elements by 20px upon page load.
var visibleposts = document.getElementsByClassName("post-contain");
for(var i =0; i <= visibleposts.length; i++){
visibleposts[i].style.height = visibleposts[i].offsetHeight + 20 + "px";
}
The above code snippet is what I implemented. It is wrapped inside an init() function that is triggered on page load. However, I am uncertain about its effectiveness as it is running on a meteor server. The function call is placed within the body onload event like so:
<head>
<script src="jquery-2.1.4.min.js"></script>
<script src="main.js"></script>
</head>
<body onload="init();">
</body>
<template name="FullFeed">
{{#each posts}}
<!-- <a href="whenisay://{{adjective}}/{{noun}}/{{user}}/{{likes}}/{{date}}/{{_id}}">-->
<a href="UnLiked.png">
<div class="post-contain">
<div class="chant">When I say <span class="varline">{{adjective}}</span> you say <span class="varline">{{noun}}</span></div>
<!--
<div class="author-box">
<p>By {{user}}<span class="spacer"> - </span>
<img class="heart" src="UnLiked.png" onclick="console.log('hello');"/>
</p>
</div>
-->
</div>
</a>
<div class="author-box">
<p>By {{user}}<span class="spacer"> - </span>
<img class="heart" src="UnLiked.png" onclick="console.log('hello');"/>
</p>
</div>
{{/each}}
</template>
If you wish to inspect and troubleshoot the code, you can visit the live deployment at