[Tutorial] Recent topics from specific forums
2 posters
Page 1 of 1
[Tutorial] Recent topics from specific forums
Choose which forums display the most recent topics.
Create a new JavaScript (The Placement: Home):
Instructions inside the code itself.
Create a new JavaScript (The Placement: Home):
- Code:
/*
* Application: Recent topics from specific forums
* Date: 23/05/2018
* Version: 1.223052018
* Copyright (c) 2018 Daemon <help.forumotion.com>
* This work is free. You can redistribute it and/or modify it
*/
(function() {
recentPosts = {
initialize: function() {
$(function() {
recentPosts.setupRecentPosts();
});
},
forums: [
{
active: true, // Selected as active
forum_name: 'Tutorials',
forum_id: 2
},
{
forum_name: 'Gunbound Utilities',
forum_id: 14
}
],
loading: 'Loading...',
by: 'By',
comments: 'Comments',
views: 'Views',
loadingImg: 'https://imgur.com/oBkwUIV.gif',
numberPosts: 7, // Number of posts shown
recent: $("<div>", {
id: 'recent-topics'
}).html(
'<ul class="recent-tabs"></ul>' +
'<div class="loaded-recent">' +
' <ul class="loaded-topics"></ul>' +
'</div>'
),
myCSS: '<style type="text/css">' +
'* {' +
' -webkit-box-sizing: border-box;' +
' -moz-box-sizing: border-box;' +
' box-sizing: border-box;' +
'}' +
'#recent-topics {' +
' background-color: #428bca;' +
' margin: 11px 0;' +
' padding: 5px;' +
' display: -webkit-box;' +
'}' +
'#recent-topics, .loaded-recent, .loaded-topics {' +
' border-radius: 4px;' +
'}' +
'.recent-tabs {' +
' margin-top: 5px;' +
' list-style-type: none;' +
' float: left;' +
' width: 18%' +
'}' +
'#recent-topics:after, #recent-topics:before, .recent-tabs:after, .recent-tabs:before, .loaded-recent:after {' +
' display: table;' +
' content: " ";' +
'}' +
'.recent-tabs li, .recent-tabs li a {' +
' display: block;' +
' position: relative;' +
'}' +
'.recent-tabs li a {' +
' padding: 10px 15px;' +
' text-decoration: none;' +
' color: #fff !important;' +
' cursor: pointer;' +
' border-radius: 4px 0 0 4px;' +
'}' +
'.recent-tabs li a:hover {' +
' background-color: rgba(0,0,0,0.3);' +
'}' +
'.recent-tabs li a.active {' +
' background-color: #fefefe;' +
' font-weight: 600;' +
' color: #428bca !important;' +
'}' +
'.loaded-recent {' +
' position: relative;' +
' min-height: 1px;' +
' background-color: #fefefe;' +
' padding: 10px;' +
' float: left;' +
' width: 82%;' +
'}' +
'.loaded-recent:after {' +
' clear: both;' +
'}' +
'.loaded-topics {' +
' background-color: #fff;' +
' border: 1px solid #ddd;' +
' list-style-type: none;' +
'}' +
'.loaded-recent li {' +
' border-bottom: 1px dashed #ddd;' +
' line-height: 30px;' +
' text-align: left;' +
'}' +
'.loaded-recent li:last-child {' +
' border-bottom: 0;' +
'}' +
'.loaded-recent li .topictitle {' +
' font-weight: 600;' +
' margin: 0 0 0 15px;' +
' text-decoration: none;' +
'}' +
'.recent-tabs li a, .loaded-topics, .loaded-recent li .topictitle {' +
' font-size: 13px;' +
'}' +
'.loaded-recent li .recent-author {' +
' float: right;' +
' padding: 0 10px;' +
'}' +
'</style>',
load: function(a) {
$.ajax({
type: "GET",
url: "/f" + a + "-?change_version=punbb",
beforeSend: function(obj) {
recentPosts.recent.find(".loaded-topics").html(
'<center>' +
' <br>' + recentPosts.loading + '<br><img src="' + recentPosts.loadingImg + '" style="height:100px" alt>' +
'</center>'
);
},
success: function(data) {
recentPosts.recent.find(".loaded-topics").html("");
$("#main-content .table:last a.topictitle:lt(" + recentPosts.numberPosts + ")", data).each(function() {
var oThis = $(this),
blog = oThis.closest("tr").find(".blog_comments"),
topicLink = oThis.prop("outerHTML"),
author = oThis.closest("tr").find("td.tcl a[href^='/u']").prop("outerHTML"),
numberAnswers = oThis.closest("tr").find("td.tc2").text(),
numberViewers = oThis.closest("tr").find("td.tc3").text(),
blogNumbers = blog.text().match(/\d+/g),
href = null;
if (blog.length) {
numberAnswers = blogNumbers[0];
numberViewers = blogNumbers[1];
}
recentPosts.recent.find(".loaded-topics").append(
'<li>' +
' <span class="recent-author">' + recentPosts.by + ' ' + author + ' - ' + recentPosts.comments + ': ' + numberAnswers + ' - ' + recentPosts.views + ': ' + numberViewers + '</span>' + topicLink + '</a>' +
'</li>'
);
recentPosts.recent.find("a").each(function() {
href = $(this).attr("href").split(/(&change|\?change)/g)[0];
$(this).attr("href", href);
});
});
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
}
});
},
request: function(a) {
recentPosts.recent.find(".active").removeClass("active"); // Remove class active
$(a).addClass("active"); // Add class active
// Picking the selected tab id
a = $(a).attr("attr-data");
recentPosts.load(a);
},
setupRecentPosts: function() {
$(recentPosts.myCSS).appendTo("head");
$(recentPosts.recent).prependTo("#main-content");
var activeMenu = "";
for (var i in recentPosts.forums) {
var item = recentPosts.forums[i];
if (item.active) {
activeMenu = " active";
recentPosts.load(item.forum_id);
} else {
activeMenu = "";
}
recentPosts.recent.find(".recent-tabs").append(
'<li>' +
' <a href="javascript:void(0)" onclick="recentPosts.request(this)" class="request-topics' + activeMenu + '" attr-data="' + item.forum_id + '">' + item.forum_name + '</a>' +
'</li>'
);
}
}
};
recentPosts.initialize()
})();
Instructions inside the code itself.
Last edited by Daemon on June 5th 2018, 1:55 am; edited 4 times in total
Daemon- Forumember
- Posts : 104
Reputation : 91
Language : Português
Re: [Tutorial] Recent topics from specific forums
worked fine in the phpbb3
i have question how would i make the first tab for all forums
and i modified the css style to change writing from right to left
for arabic forums users
- Code:
/*
* Application: Recent topics from specific forums
* Date: 12/04/2018
* Version: 1.112042018
* Copyright (c) 2018 Daemon <help.forumotion.com>
* This work is free. You can redistribute it and/or modify it
*/
jQuery(function() {
// Below you can add and delete the forums that you want to appear.
var forums = [
{
active: true, // Selected as active
forum_name: "Tutorials",
forum_id: 6
},
{
forum_name: "Gunbound Utilities",
forum_id: 13
}
];
var lang = {
loading: "جاري تحميل",
by: "By",
comments: "ردود",
views: "مشاهدات"
};
var images = {
loadingImage: "https://imgur.com/oBkwUIV.gif"
};
var config = {
topicsNumber: 10, // Number of topics shown
recent: jQuery("<div>",{
id: "recent-topics"
}).html(
'<ul class="recent-tabs"></ul>' +
'<div class="loaded-recent">' +
' <ul class="loaded-topics"></ul>' +
'</div>'
),
myCSS: '<style type="text/css">' +
'* {' +
' -webkit-box-sizing: border-box;' +
' -moz-box-sizing: border-box;' +
' box-sizing: border-box;' +
'}' +
'#recent-topics {' +
' background-color: #428bca;' +
' margin: 11px 0;' +
' padding: 5px;' +
' display: -webkit-box;' +
'}' +
'#recent-topics, .loaded-recent, .loaded-topics {' +
' border-radius: 4px;' +
'}' +
'.recent-tabs {' +
' margin-top: 5px;' +
' list-style-type: none;' +
' float: right;' +
' width: 18%' +
'}' +
'#recent-topics:after, #recent-topics:before, .recent-tabs:after, .recent-tabs:before, .loaded-recent:after {' +
' display: table;' +
' content: " ";' +
'}' +
'.recent-tabs li, .recent-tabs li a {' +
' display: block;' +
' position: relative;' +
'}' +
'.recent-tabs li a {' +
' padding: 10px 15px;' +
' text-decoration: none;' +
' color: #fff !important;' +
' cursor: pointer;' +
' border-radius: 4px 0 0 4px;' +
'}' +
'.recent-tabs li a:hover {' +
' background-color: rgba(0,0,0,0.3);' +
'}' +
'.recent-tabs li a.active {' +
' background-color: #fefefe;' +
' font-weight: 600;' +
' color: #428bca !important;' +
'}' +
'.loaded-recent {' +
' position: relative;' +
' min-height: 1px;' +
' background-color: #fefefe;' +
' padding: 10px;' +
' float: left;' +
' width: 82%;' +
'}' +
'.loaded-recent:after {' +
' clear: both;' +
'}' +
'.loaded-topics {' +
' background-color: #fff;' +
' border: 1px solid #ddd;' +
' list-style-type: none;' +
'}' +
'.loaded-recent li {' +
' border-bottom: 1px dashed #ddd;' +
' line-height: 30px;' +
' text-align: right;' +
'}' +
'.loaded-recent li:last-child {' +
' border-bottom: 0;' +
'}' +
'.loaded-recent li .topictitle {' +
' font-weight: 600;' +
' margin: 0 0 0 15px;' +
' text-decoration: none;' +
'}' +
'.recent-tabs li a, .loaded-topics, .loaded-recent li .topictitle {' +
' font-size: 13px;' +
'}' +
'.loaded-recent li .recent-author {' +
' float: left;' +
' padding: 0 10px;' +
'}' +
'</style>'
};
// Not editable from here down
// Inserting CSS before page body
jQuery(config.myCSS).insertBefore("body");
// Inserting element modal prepend to main content
jQuery(config.recent).prependTo("#main-content");
var activeMenu = "";
jQuery.each(forums, function(e, val) {
if(val.active) {
activeMenu = " active";
loadRecents(val.forum_id);
} else activeMenu = "";
config.recent.find(".recent-tabs").append("<li><a href='javascript:void(0)' class='request-topics" + activeMenu + "' attr-data='" + val.forum_id + "'>" + val.forum_name + "</a></li>");
}); // End each
var getId = null;
config.recent.on("click", ".request-topics", function() {
jQuery(".active").removeClass("active"); // Remove class active
jQuery(this).addClass("active"); // Add class active
// Picking the selected tab id
getId = jQuery(this).attr("attr-data");
loadRecents(getId);
});
function loadRecents(id) {
jQuery.ajax({
type: "GET",
url: "/f" + id + "-?change_version=punbb",
beforeSend: function(obj) {
config.recent.find(".loaded-topics").html("<center><br>" + lang.loading + "<br><img src='" + images.loadingImage + "' style='height:100px' alt></center>");
},
success: function(data) {
config.recent.find(".loaded-topics").html("");
jQuery("#main-content .table:last a.topictitle:lt(" + config.topicsNumber + ")", data).each(function() {
var oThis = jQuery(this),
blog = oThis.closest("tr").find(".blog_comments"),
topicLink = oThis.prop("outerHTML"),
author = oThis.closest("tr").find("td.tcl a[href^='/u']").prop("outerHTML"),
numberAnswers = oThis.closest("tr").find("td.tc2").text(),
numberViewers = oThis.closest("tr").find("td.tc3").text(),
blogNumbers = blog.text().match(/\d+/g),
href = null;
if(blog.length) {
numberAnswers = blogNumbers[0];
numberViewers = blogNumbers[1];
}
config.recent.find(".loaded-topics")
.append("<li><span class='recent-author'>" + lang.by + " " + author + " - " + lang.comments + ": " + numberAnswers + " - " + lang.views + ": " + numberViewers + "</span>" + topicLink + "</a></li>");
config.recent.find("a").each(function() {
href = jQuery(this).attr("href").split(/(&change|\?change)/g)[0];
jQuery(this).attr("href", href);
});
});
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
}
});
}
});
Similar topics
» Recent Topics of a specific forum
» [Tutorial] Show the first post reminder in specific topics
» Widget: Recent topics of a specific sub-forum
» Problem with tutorial - recent topics
» More instances ->> Widget: Recent topics of a specific sub-forum
» [Tutorial] Show the first post reminder in specific topics
» Widget: Recent topics of a specific sub-forum
» Problem with tutorial - recent topics
» More instances ->> Widget: Recent topics of a specific sub-forum
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum