<style type="text/css">
div.structure {
width: auto;
}
#bib iframe {max-width: 100%;}
#bib img {max-width: 100%;}
#bib {overflow: hidden;}
#bib p {margin: 0;
padding: 0 0 1em 0;
line-height: 150%;}
.box {
margin-bottom: 5px;
width: auto;
height: auto;
background-color: #ffffff;
border: 2px solid #D4D4D4;
border-radius: 0 0 8px 8px;
-moz-border-radius:0 0 8px 8px;
-khtml-border-radius: 0 0 8px 8px;
box-shadow: 0 0 15px #A9A9A9;
padding: 20px 15px;
}
.boxrss {
margin-bottom: 5px;
width: auto;
height: auto;
background-color: #ffffff;
border: 2px solid #D4D4D4;
border-radius: 0 0 8px 8px;
-moz-border-radius:0 0 8px 8px;
-khtml-border-radius: 0 0 8px 8px;
box-shadow: 0 0 15px #A9A9A9;
padding: 5px;
}
.post_title {
margin-bottom: 5px;
width: auto;
height: auto;
background-color: smoke;
border: 2px solid lightsteelblue;
padding: 3px 3px 4px;
}
.punbb .quote-box, .punbb code-box {
background-color: #DCDCDC;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
padding: 20px 15px 20px 10px;}
.noscriptmod {
box-shadow: 0 0 8px rgb(184, 235, 255);
border-radius: 20px;
height: 220px;
}
</style>
<table style="height: auto; width: 100%;" frame="void" rules="none">
<tbody>
<tr>
<td class="left" valign="top" widht="20%"><div class="structure"><h1><center>Заголовок</center></h1>
<div class="box">Текст</div></div>
<br>
<div class="structure"><h1><center>Заголовок</center></h1>
<div class="box">Текст</div></div></td>
<td class="center" valign="top" width="60%"><div class="structure"><h1><center>Новостная лента</center></h1>
<div class="boxrss" style="height: auto;">
<script>
$(function () {
let forumId = "4, 2, 3, ", // ID форумов через запятую
limit = 30, // Количество выводимых постов (не больше 100 !!!)
cut = 255; // Количество символов до обрезки длинных текстов и показа "Читать полностью"
$("div.boxrss").append(
'<div id="lenta" style="width: 100%; background: #fff;"><table id="bib" cellspacing="0" width=100% align="center"><tr><th width=100%><b>Последние сообщения форума</b></th></tr></table></div>'
);
function showTopics() {
$.get(
"/api.php?method=topic.get&forum_id=" +
forumId +
"&sort_by=id&sort_dir=desc" +
"&limit=" +
limit,
"",
function (data) {
let topics = data.response.slice(0, limit);
const topicId = topics.map((topic) => topic.id).join(",");
$.get(
"/api.php?method=post.get&forum_id=" +
forumId +
"&topic_id=" +
topicId +
"&sort_dir=desc&limit=" +
limit,
"",
function (posts) {
$("#bib").empty();
posts.response.forEach(function (post) {
const subject = post.subject;
let message = post.message || "";
const moreMes = message;
if (message.length > cut) {
message = message.substring(0, cut) + "...";
}
const row = $(
'<tr><td><div class="post_title"><strong><a href="/viewtopic.php?id=' +
post.topic_id +
'" title="' +
subject +
'">' +
subject +
"</a></strong><span style="float: right;">' +
post.username +
'</span></div><div class="message-preview">' +
message +
"</div></td></tr>"
);
if (moreMes.length > cut) {
const moreBut = $(
'<a href="javascript:void(0);" class="read-more">Читать далее</a>'
);
moreBut.on("click", function () {
$(this).siblings(".message-preview").html(moreMes);
$(this).remove();
});
row.find("td").append(moreBut);
}
$("#bib").append(row);
})
}
)
}
)
}
showTopics();
});
</script>
<noscript><div class="noscriptmod"><center><img src="http://s3.uploads.ru/BPXfo.png"></center></div></noscript>
</div></div>
</td>
<td class="right" valign="top" width="20%"><div class="structure"><h1><center>Правый заголовок</center></h1>
<div class="box">Текст</div></div>
<br>
<div class="structure"><h1><center>Правый заголовок</center></h1>
<div class="box">Текст</div></div>
</td>
</tr>
</tbody>
</table>