javascript - Add to offsetHeight of entire class -
i have page elements in 1 class of variable heights based on size of text content of them. on page load need add 20px height of of them.
var visibleposts = document.getelementsbyclassname("post-contain"); for(var =0; <= visibleposts.length; i++){ visibleposts[i].style.height = visibleposts[i].offsetheight + 20 + "px"; } that's code used. put inside of init() function runs on page load. however, i'm not sure how that's working since it's running on meteor server. have onload of body. 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 <span class="varline">{{adjective}}</span> <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 want debug it, it's running @ http://whensayfeed.meteor.com
as humble.rumble mentioned in comment, code not working, because @ time body loaded, there not yet ".post-contain" divs generated template fullfeed.
you should not execute code modify template-generated dom in main.js, use template.mytemplate.onrendered callback registering function. update: template.mytemplate.onrendered meteor not wait individual data being loaded. there many solutions how attach callback after items have been loaded. see other stackoveflow questions:
- how execute helper function after dom ready in meteor
- running function after meteor template updated
- callback when template items finished rendering in meteor?
- meteor : wait until templates rendered
however, none of seamless , reasonably simple. why can use mutationobserver instead. in case, want observe added <a/> items <body/>, find .post-contain:
new mutationobserver(function (mutations){ mutations.foreach(function (mutation){ $(mutation.addednodes).each(function (){ if (this.localname == "a") var mynewdiv = $(".post-contain",this)[0] }); }); }).observe($("body")[0], {childlist: true}); as i'm not familiar template api, possible template global variable not available until document has been loaded, in case you'd use jquery's .ready( handler )
since including jquery, may use set height. try .height( function ). in case this:
$(".post-contain").height(function (index, height) { // increase height of ".post-contain" divs return (height + 20); }); all combined yield following:
$(function(){ new mutationobserver(function (mutations){ mutations.foreach(function (mutation){ $(mutation.addednodes).each(function (){ if (this.localname == "a") $(".post-contain",this).height(function (index, height){ return (height + 20); }); }); }); }).observe($("body")[0], {childlist: true}); }); i have tested on local meteor installation.
by way, why need add height this? have take of of other events, .resize(). if want divs have height based on content, why not use css padding instead?
Comments
Post a Comment