Я пытаюсь создать сгенерированный фид из API Tumblr. Моя страница тестирования здесь:Заполнение пустого пространства цветом фона?
http://www.nevermorestudiosonline.com/youtubetest
Не стесняйтесь игнорировать URL. Я сделал вещь на YouTube и не стал менять имя файла, когда начал тестировать Tumblr. Я не могу понять, что я делаю неправильно с цветом фона моих div. Я хочу, чтобы раздел «Отправлено» заполнялся вниз, а фон содержимого контента - справа. (Цвета просто заполнители на данный момент. Я планирую настроить, когда я получаю вещи на самом деле, на моей первой странице.)
Вот сценарий, который я выполняю, чтобы вытащить мои сообщения, а затем создать их в разных div.
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 I can keep an eye on how things are coming in. Will be 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 By ' + 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 By ' + 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 and 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 By ' + 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 By ' + 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 this 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 By ' + 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 By ' + 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 to 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 By ' + 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 By ' + 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 is 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 By ' + data.response.posts[i].post_author + '</p></div>' +
'<div class="postbody"><p>Please contact the webmaster to add support for displaying this post!</p></div>'
).appendTo('#blogblock');
};
};
};
Сценарий отлично работает. Я планирую оптимизировать после того, как я получу все, чтобы все работало правильно. Вот CSS, что я (в настоящее время) применение к стойкам:
.blogpost {
clear: both;
}
.blogtitle {
background: -webkit-linear-gradient(left, #444444 , black); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, #444444 , black); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, #444444 , black); /* For Firefox 3.6 to 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;
}
Я просто не уверен, что положить, где, чтобы получить цвет, чтобы заполнить пробелы. Это все, что я ищу, но я предоставил сценарий и так в случае необходимости корректировки конструкции каждого сообщения.
Спасибо большое! Это сработало отлично.^_ ^ –