jquery - javascript only working remotely on tumblr -
this problem might small, can't figure out. working on own tumblr theme, question might not have tumblr.
the thing try loop checks if pictures smaller 500px wide. want adjust divs containing smaller images have background , border. html , script:
<div class="photo"> <div class="image"> <img class="post-image" alt="alt" src="img-source"> </div> </div> <script type="text/javascript"> var element = document.getelementsbyclassname('image'); var elements = document.getelementsbyclassname('post-image'); (var i=0, c=0; i<elements.length, c<element.length; i++, c++) { if ($(elements[i]).width() < 499){ $(element[c]).css({ 'padding-top' : 16 + 'px', 'padding-bottom': 10 + 'px', 'background' : '#222222', 'border' : 1 + 'px solid #353535' }); } } </script> it works in 'edit theme' part of tumblr. doesnt on actual blog. perhaps here can me figure out? , yes included jquery api in header.
it works fine when enter through console, i'm gonna take stab , it's called early. need wait page finish loading, code. since you've got jquery, it's simple this:
$(document).ready(function () { var element = document.getelementsbyclassname('image'); var elements = document.getelementsbyclassname('post-image'); (var = 0, c = 0; < elements.length, c < element.length; i++, c++) { if ($(elements[i]).width() < 499) { $(element[c]).css({ 'padding-top': 16 + 'px', 'padding-bottom': 10 + 'px', 'background': '#222222', 'border': 1 + 'px solid #353535' }); } } });
Comments
Post a Comment