I am experiencing an issue with dynamically loaded content where Images work fine, but Links and Text are not displaying properly.
For reference, you can view the problem in this JSFiddle: http://jsfiddle.net/HRs3u/1/
I suspect that it might be related to text caching or lack of caching?
Here is the section of code responsible for appending the content:
function findpost(timestamp, blog){
//console.log(blog);
var length = blog.length;
for(var e=0; e<length; e++){
var type = blog[e+1];
if(timestamp === blog[e]){
if(type === 0){
$("#content").append("\
<div class='post photo'>\
<img src='"+blog[e+2]+"' width='400px'/>\
</div>"
);
} else if(type === 1){
$("#content").append("\
<div class='post video'>\
"+blog[e+2]+"<br>\
"+blog[e+3]+"\
</div>"
);
console.log("Video");
} else if(type === 2){
$("#content").append("\
<div class='post link' />\
<a href='"+blog[e+2]+"' target='_blank'>"+blog[e+3]+"</a>\
</div>\
");
console.log("Link!");
} else if(type === 3){
var title = blog[e+3];
var text = blog[e+2];
$("#content").append("\
<div class='post text' />\
<h2>"+title+"</h2>\
"+text+"\
</div>\
");
console.log("Text!");
} else if(type === 4){
$("#content").append("\
<div class='post tweet' />\
"+blog[e+2]+"\
</div>\
");
console.log("Tweet!");
} else {
console.warn("ERROR!");
}
}
}
}
Here is the CSS associated with the post divs:
/*___Post Divs*/
.post{
display : inline-block;
float : left;
line-height : 0;
margin : 5px;
overflow : hidden;
border : 1px solid #000;
width : 400px;
height : 400px;
}
.post.photo{
background-color: #ccc;
}
.post.video{
background-color: #0f1;
}
.post.link{
background-color: #ff4;
}
.post.text{
background-color: #c0f;
}
.post.tweet{
background-color: #f44;
}