jquery - Filling empty space with a background color? -
i'm attempting style generated feed tumblr api. testing page here:
http://www.nevermorestudiosonline.com/youtubetest
feel free ignore url. did youtube thing , didn't bother change file name when started testing tumblr. can't figure out i'm doing wrong background color of divs. want "posted by" section fill downwards, , post content background fill right. (colors placeholders time being. plan adjust when things live on front page.)
here's script i'm running pull posts, , subsequently create them within various divs.
jquery.ajax({url: "http://api.tumblr.com/v2/blog/nevermorestudiosonline.tumblr.com/posts?api_key={api_key}&limit=5&jsonp=log_me", datatype: "jsonp"}); function log_me(data){ console.log(data); //so can keep eye on how things coming in. removed in live version. for(i=0; (i < data.response.total_posts) && (i < 5); i++){ if (data.response.posts[i].type == "text"){ if (data.response.posts[i].hasownproperty('body_abstract')){ $('<div class="blogpost"></div>').append( '<div class="blogtitle"><h2>' + data.response.posts[i].title + '</h2></div>' + '<div class="postedby"><img class="avatar" src="http://api.tumblr.com/v2/blog/' + data.response.posts[i].post_author + '.tumblr.com/avatar" alt="avatar" height="64" width="64" /><p>posted ' + data.response.posts[i].post_author + '</p></div>' + '<div class="postbody">' + data.response.posts[i].body_abstract + '<p>read more...</p></div>' ).appendto('#blogblock'); } else { $('<div class="blogpost"></div>').append( '<div class="blogtitle"><h2>' + data.response.posts[i].title + '</h2></div>' + '<div class="postedby"><img class="avatar" src="http://api.tumblr.com/v2/blog/' + data.response.posts[i].post_author + '.tumblr.com/avatar" alt="avatar" height="64" width="64" /><p>posted ' + data.response.posts[i].post_author + '</p></div>' + '<div class="postbody">' + data.response.posts[i].body + '</div>' ).appendto('#blogblock'); }; } else if (data.response.posts[i].type == "photo"){ $('<div class="blogpost"></div>').append( '<div class="blogtitle"><h2>photos , images</h2></div>' + '<div class="postedby"><img class="avatar" src="http://api.tumblr.com/v2/blog/' + data.response.posts[i].post_author + '.tumblr.com/avatar" alt="avatar" height="64" width="64" /><p>posted ' + data.response.posts[i].post_author + '</p></div>' + '<div class="postbody">' + data.response.posts[i].caption + '</div>' ).appendto('#blogblock'); } else if (data.response.posts[i].type == "quote"){ $('<div class="blogpost"></div>').append( '<div class="blogtitle"><h2>words of wisdom</h2></div>' + '<div class="postedby"><img class="avatar" src="http://api.tumblr.com/v2/blog/' + data.response.posts[i].post_author + '.tumblr.com/avatar" alt="avatar" height="64" width="64" /><p>posted ' + data.response.posts[i].post_author + '</p></div>' + '<div class="postbody"><p>“' + data.response.posts[i].text + '” --' + data.response.posts[i].source + '</p></div>' ).appendto('#blogblock'); } else if (data.response.posts[i].type == "link"){ $('<div class="blogpost"></div>').append( '<div class="blogtitle"><h2>check link out!</h2></div>' + '<div class="postedby"><img class="avatar" src="http://api.tumblr.com/v2/blog/' + data.response.posts[i].post_author + '.tumblr.com/avatar" alt="avatar" height="64" width="64" /><p>posted ' + data.response.posts[i].post_author + '</p></div>' + '<div class="postbody"><p>' + data.response.posts[i].url + '</p></div>' ).appendto('#blogblock'); } else if (data.response.posts[i].type == "chat"){ $('<div class="blogpost"></div>').append( '<div class="blogtitle"><h2>' + data.response.posts[i].title + '</h2></div>' + '<div class="postedby"><img class="avatar" src="http://api.tumblr.com/v2/blog/' + data.response.posts[i].post_author + '.tumblr.com/avatar" alt="avatar" height="64" width="64" /><p>posted ' + data.response.posts[i].post_author + '</p></div>' + '<div class="postbody"><p>' + data.response.posts[i].body + '</p></div>' ).appendto('#blogblock'); } else if (data.response.posts[i].type == "audio"){ $('<div class="blogpost"></div>').append( '<div class="blogtitle"><h2>listen this!</h2></div>' + '<div class="postedby"><img class="avatar" src="http://api.tumblr.com/v2/blog/' + data.response.posts[i].post_author + '.tumblr.com/avatar" alt="avatar" height="64" width="64" /><p>posted ' + data.response.posts[i].post_author + '</p></div>' + '<div class="postbody">' + data.response.posts[i].player + '<p>' + data.response.posts[i].caption + '</p></div>' ).appendto('#blogblock'); } else if (data.response.posts[i].type == "video"){ $('<div class="blogpost"></div>').append( '<div class="blogtitle"><h2>watch this!</h2></div>' + '<div class="postedby"><img class="avatar" src="http://api.tumblr.com/v2/blog/' + data.response.posts[i].post_author + '.tumblr.com/avatar" alt="avatar" height="64" width="64" /><p>posted ' + data.response.posts[i].post_author + '</p></div>' + '<div class="postbody">' + data.response.posts[i].player[1].embed_code + '<p>' + data.response.posts[i].caption + '</p></div>' ).appendto('#blogblock'); } else { $('<div class="blogpost"></div>').append( '<div class="blogtitle"><h2>this post type broken!</h2></div>' + '<div class="postedby"><img class="avatar" src="http://api.tumblr.com/v2/blog/' + data.response.posts[i].post_author + '.tumblr.com/avatar" alt="avatar" height="64" width="64" /><p>posted ' + data.response.posts[i].post_author + '</p></div>' + '<div class="postbody"><p>please contact webmaster add support displaying post!</p></div>' ).appendto('#blogblock'); }; }; }; script working great. plan optimize after working right way. here's css i'm (currently) applying posts:
.blogpost { clear: both; } .blogtitle { background: -webkit-linear-gradient(left, #444444 , black); /* safari 5.1 6.0 */ background: -o-linear-gradient(right, #444444 , black); /* opera 11.1 12.0 */ background: -moz-linear-gradient(right, #444444 , black); /* firefox 3.6 15 */ background: linear-gradient(to right, #444444 , black); /* standard syntax */ width: 968px; height: 40px; } .blogtitle h2 { padding: 5px; } .postedby { text-align: center; width: 100px; float: left; background: #888888; } .postedby p { margin-top: 5px; } .postedby img { margin-top: 5px; } .postbody { float: left; background: #bbbbbb; padding: 5px; } .postbody p{ margin: 5px 0px 5px 0px; } i'm not sure put color fill spaces. that's i'm looking for, provided script , such in case adjustments construction of each post needs made.
as far post body goes, float:left div, stops taking 100% of width , goes wide content. need remove float on post body. notice when expands width of whole page. need put of posts inside container div stop happening.
as far posted taking full height, there several things can do, outline favorite.
first set min-height blog post , postion:relative (i explain that)
.blogpost { clear: both; position: relative; min-height: 165px; } then need position posted absolute. imo best way make 100% of post height. made blog post position relative absolute positioning of posted relative blog post.
.postedby { text-align: center; width: 100px; background: #888888; bottom: 0; top: 40px; position: absolute; } then need make post body have margin compensate position absolute of posted section.
.postbody { background: #bbbbbb; padding: 5px; margin-left: 100px; } these things should make good!
edit: there couple of other edits if want this: http://i.imgur.com/c3jmkmm.png
please advise :)
Comments
Post a Comment