The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Recent Topics of a specific forum

3 posters

Go down

Solved Recent Topics of a specific forum

Post by Sir Chivas™ June 28th 2023, 4:51 am

Hi,

So, I'm currently working on a "Link Directory" and I wanted to add this cool feature I found at FMCodes. I've already asked for help there, but I haven't gotten the assist just yet. So, I'm giving it a try here.

My forum URL: https://www.aforums.org/forum
Tutorial: https://www.fmcodes.net/t1627-recent-topics-from-specific-forums#post--16278
My help thread there: https://www.fmcodes.net/t2034-recent-topics-of-a-specific-forum-help#post--16343
Here's a preview of the thread with the topic icon: https://www.aforums.org/t423-aforum-advertising-forum#2426
Here's where the recent topics is showing: https://www.aforums.org/h10-link-directory (its under Computers and Internet :: Forum Services)
Forum Version: phpBB3 - Forumactif Edge v1.3.3

Any ways, I'm trying to figure out if its possible to add the topic's icons as well to reduce the list. Either make them into drop down links with categories?

Topic icon of Forum Services:

Recent Topics of a specific forum 977



Recent Topics of a specific forum Firesh11


So instead of having a long list going vertically, can we shorten it? As in creating a drop-down list. Each will be categorized based on each drop-down list, as in

Arts | Graphics, Business | Jobs, Computer | Internet etc... so each will drop down with each 5 sections that they each have.


It'll display something similar to this:

Arts | Graphics
Business | Jobs
Computer | Internet




Once clicked:

Arts | Graphics
Business | Jobs
• Electrical Companies
• Construction Companies
• HVACR Companies
• Other Companies
• Plumbing Companies
Computer | Internet

Now when you click on a section of whichever category it'll display the topics along with the topic icon.

If you need an account, please let me know and I'll provide you with one.


Last edited by Sir Chivas™ on March 8th 2024, 5:54 pm; edited 4 times in total
Sir Chivas™
Sir Chivas™
Helper
Helper

Male Posts : 6983
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

https://aforums.org

Back to top Go down

Solved Re: Recent Topics of a specific forum

Post by Razor12345 June 28th 2023, 9:04 am

Good morning!

We don't have access to view the code as it is hidden to those who haven't answered the thread in the fmcodes forum.


Recent Topics of a specific forum Screen51
Razor12345
Razor12345
Support Moderator
Support Moderator

Male Posts : 1526
Reputation : 264
Language : Ukr, Rus, Eng
Location : Ukraine

Back to top Go down

Solved Re: Recent Topics of a specific forum

Post by Sir Chivas™ June 28th 2023, 9:08 am

Hi Razor,

Good morning and I wish you a great start for your day. Here's the code:

Code:
<script>
/*
 *  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: 'Rules | Guidelines',
                forum_id: 9
            },
 
{
                forum_name: '<em class="fa fa-paint-brush"></em> Arts | Graphics :: Artwork Images',
                forum_id: 9
            },
  {
                forum_name: '<em class="fa fa-paint-brush"></em> Arts | Graphics :: Drawings',
                forum_id: 9
            },
  {
                forum_name: '<em class="fa fa-paint-brush"></em> Arts | Graphics :: G-Designs Portfolio',
                forum_id: 9
            },
  {
                forum_name: '<em class="fa fa-paint-brush"></em> Arts | Graphics :: Graphic Services',
                forum_id: 9
            },
  {
                forum_name: '<em class="fa fa-paint-brush"></em> Arts | Graphics :: Theme Designs',
                forum_id: 9
            },
 {
                forum_name: '  <em class="fa fa-briefcase"></em> Business | Jobs :: Electrical Companies',
                forum_id: 9
            },
 {
                forum_name: '  <em class="fa fa-briefcase"></em> Business | Jobs :: Construction Companies',
                forum_id: 9
            },
 {
                forum_name: '  <em class="fa fa-briefcase"></em> Business | Jobs :: HVACR Companies',
                forum_id: 9
            },
 {
                forum_name: '  <em class="fa fa-briefcase"></em> Business | Jobs :: Other Companies',
                forum_id: 9
            },
 {
                forum_name: '  <em class="fa fa-briefcase"></em> Business | Jobs :: Plumbing Companies',
                forum_id: 9
            },
{
                forum_name: '<em class="fa fa-internet-explorer"></em> Computers | Internet :: Blogs',
                forum_id: 9
            },
  {
                forum_name: '<em class="fa fa-internet-explorer"></em> Computers | Internet :: Computer Parts',
                forum_id: 9
            },
            {
                forum_name: '<em class="fa fa-internet-explorer"></em> Computers | Internet :: Forum Services',
                forum_id: 67
            },
  {
                forum_name: '<em class="fa fa-internet-explorer"></em> Computers | Internet :: Softwares',
                forum_id: 9
            },
  {
                forum_name: '<em class="fa fa-internet-explorer"></em> Computers | Internet :: Websites',
                forum_id: 9
            },
 {
                forum_name: '<em class="fa fa-video-camera"></em> Entertainment | Music  :: Films',
                forum_id: 9
            },
 {
                forum_name: '<em class="fa fa-video-camera"></em> Entertainment | Music  :: Movies',
                forum_id: 9
            },
 {
                forum_name: '<em class="fa fa-video-camera"></em> Entertainment | Music  :: Music',
                forum_id: 9
            },
 {
                forum_name: '<em class="fa fa-video-camera"></em> Entertainment | Music  :: Other',
                forum_id: 9
            },
 {
                forum_name: '<em class="fa fa-video-camera"></em> Entertainment | Music  :: Tv Shows',
                forum_id: 9
            },
 {
                forum_name: '<em class="fa fa-gamepad"></em> Games | RPGs :: Board Games',
                forum_id: 9
            },
 {
                forum_name: '<em class="fa fa-gamepad"></em> Games | RPGs :: Fantasy RP',
                forum_id: 9
            },
 {
                forum_name: '<em class="fa fa-gamepad"></em> Games | RPGs :: PC Games',
                forum_id: 9
            },
 {
                forum_name: '<em class="fa fa-gamepad"></em> Games | RPGs :: PlayStation Games',
                forum_id: 9
            },
 {
                forum_name: '<em class="fa fa-gamepad"></em> Games | RPGs :: Xbox Games',
                forum_id: 9
            },
 {
                forum_name: '<em class="fa fa-list-ol"></em> Other :: Miscellaneous',
                forum_id: 9
            },
 {
                forum_name: '<em class="fa fa-futbol-o"></em> Sports | Hobbies :: Baseball',
                forum_id: 9
            },
 {
                forum_name: '<em class="fa fa-futbol-o"></em> Sports | Hobbies :: Basketball',
                forum_id: 9
            },
 {
                forum_name: '<em class="fa fa-futbol-o"></em> Sports | Hobbies :: Football',
                forum_id: 9
            },
 {
                forum_name: '<em class="fa fa-futbol-o"></em> Sports | Hobbies :: Others',
                forum_id: 9
            },
 {
                forum_name: '<em class="fa fa-futbol-o"></em> Sports | Hobbies :: Soccer',
                forum_id: 9
            },
 {
                forum_name: '<em class="fa fa-twitter"></em> Social Media :: Facebook',
                forum_id: 9
            },
 {
                forum_name: '<em class="fa fa-twitter"></em> Social Media :: Instagram',
                forum_id: 9
            },
 {
                forum_name: '<em class="fa fa-twitter"></em> Social Media :: Other',
                forum_id: 9
            },
 {
                forum_name: '<em class="fa fa-twitter"></em> Social Media :: Twitter',
                forum_id: 9
            },
 {
                forum_name: '<em class="fa fa-twitter"></em> Social Media :: YouTube',
                forum_id: 9
            },
        ],
        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 {' +
            '  margin: 11px 0;' +
            '  padding: 5px;' +
            ' background-color: #b3280a;'+
            '  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()
})();</script>
Sir Chivas™
Sir Chivas™
Helper
Helper

Male Posts : 6983
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

https://aforums.org

poesia-verses likes this post

Back to top Go down

Solved Re: Recent Topics of a specific forum

Post by Razor12345 June 28th 2023, 12:11 pm

Is this the effect you want?

Recent Topics of a specific forum Scree201

When you click on the "+" button, the sections open

Recent Topics of a specific forum Scree202

Recent Topics of a specific forum Scree203

I just don't quite understand - do you need topic icons or not?

Code:
(function() {
    recentPosts = {
        initialize: function() {
            $(function() {
                recentPosts.setupRecentPosts();
            });
        },
        forums: [
            {
                active: true, // Selected as active
                forum_name: 'Rules | Guidelines',
                forum_id: 1
            },
            {
                forum_name: 'Arts | Graphics',
                forum_id: 10000,
                subforums: [
                    {
                        forum_name: 'Artwork Images',
                        forum_id: 5
                    },
                    {
                        forum_name: 'Drawings',
                        forum_id: 6
                    }
                ]
            }
        ],
        loading: 'Loading...',
        by: 'By',
        comments: 'Comments',
        views: 'Views',
        loadingImg: 'https://imgur.com/oBkwUIV.gif',
        numberPosts: 7,
        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 {' +
            '  margin: 11px 0;' +
            '  padding: 5px;' +
            ' background-color: #b3280a;' +
            '  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;' +
            '}' +

            '.recent-tabs .sub-menu {' +
            '  display: none; ' +
            ' margin: 0;' +
            '}' +
     
           ' .active_menu {' +
           ' display: block !important' +
        ' }' +

            '.recent-tabs .sub-menu li {' +
            '  margin: 0;' +
            '}' +

            '.recent-tabs .sub-menu li a {' +
            ' display: block;' +
            '  padding: 10px 15px;' +
            '  text-decoration: none;' +
            '  color: #fff !important;' +
            '    cursor: pointer;' +
            '  border-radius: 0;' +
            '}' +

            '.recent-tabs .sub-menu li a:hover {' +
            '  background-color: rgba(0, 0, 0, 0.3);' +
            '}' +

            '.recent-tabs .sub-menu li a.active {' +
            ' background-color: #fefefe;' +
            '  font-weight: 600;' +
            '  color: #428bca !important;' +
            '}' +

            '</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(),
             imageOfTopic = oThis.closest("tr").find("td.tcl.tdtopics span+img")[0].attributes[0].nodeValue,
                            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">' + '<img class="image_of_topic" src=' + imageOfTopic + '>' + 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
            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 = "";
                }

                var $menu = $('<li>' +
                    '    <a href="javascript:void(0)" onclick="recentPosts.request(this)" class="request-topics' + activeMenu + '" attr-data="' + item.forum_id + '">' + item.forum_name + '</a>' +
                    '</li>');

                if (item.subforums && item.subforums.length > 0) {
                    $menu.find("a").append('<button class="sub-menu-button">+</button>');
                    var $subMenu = $('<ul class="sub-menu"></ul>');
                    for (var j in item.subforums) {
                        var subItem = item.subforums[j];
                        $subMenu.append('<li>' +
                            '    <a href="javascript:void(0)" onclick="recentPosts.request(this)" class="request-topics" attr-data="' + subItem.forum_id + '">' + subItem.forum_name + '</a>' +
                            '</li>');
                    }
                    $menu.append($subMenu);
                }

                recentPosts.recent.find(".recent-tabs").append($menu);
            }

            $(".sub-menu-button").click(function() {
              $(".recent-tabs .sub-menu").toggleClass('active_menu');
            });
   
        },
    };
    recentPosts.initialize();
})();

In CSS:

Code:
.image_of_topic {
  margin-right: 120px;
}


If you do not need topic icons, then find:

Code:
imageOfTopic = oThis.closest("tr").find("td.tcl.tdtopics span+img")[0].attributes[0].nodeValue,

And delete.

Then find

Code:
 '<li>' +
                            '    <span class="recent-author">' + '<img class="image_of_topic" src=' + imageOfTopic + '>' + recentPosts.by + ' ' + author + ' - ' + recentPosts.comments + ': ' + numberAnswers + ' - ' + recentPosts.views + ': ' + numberViewers + '</span>' + topicLink + '</a>' +
                            '</li>'

And delete this:

Code:
+ '<img class="image_of_topic" src=' + imageOfTopic + '>'

If you don't need to display topic icons, then don't use this code:

Code:
.image_of_topic {
  margin-right: 120px;
}


Recent Topics of a specific forum Screen51
Razor12345
Razor12345
Support Moderator
Support Moderator

Male Posts : 1526
Reputation : 264
Language : Ukr, Rus, Eng
Location : Ukraine

Sir Chivas™ and TonnyKamper like this post

Back to top Go down

Solved Re: Recent Topics of a specific forum

Post by Sir Chivas™ June 28th 2023, 2:44 pm

Hi Razor, looks like you're in the correct path to what I'm wishing for. Yes, I want the topic icon to display as well. But unfortunately when I change the code this happens:

Recent Topics of a specific forum Firesh17



I got it to work, had to delete cookies. Anyways, let me get back from work to meddle with it and I'll re-edit or post a confirmation if this was achieved.


Last edited by Sir Chivas™ on June 28th 2023, 2:51 pm; edited 1 time in total
Sir Chivas™
Sir Chivas™
Helper
Helper

Male Posts : 6983
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

https://aforums.org

Back to top Go down

Solved Re: Recent Topics of a specific forum

Post by Razor12345 June 28th 2023, 2:51 pm

I inserted this code in Javascript codes management

Because you are using this code on an HTML page, you need to wrap it with an script tag:

Code:
<script>
(function() {
    recentPosts = {
        initialize: function() {
            $(function() {
                recentPosts.setupRecentPosts();
            });
        },
        forums: [
            {
                active: true, // Selected as active
                forum_name: 'Rules | Guidelines',
                forum_id: 1
            },
            {
                forum_name: 'Arts | Graphics',
                forum_id: 10000,
                subforums: [
                    {
                        forum_name: 'Artwork Images',
                        forum_id: 5
                    },
                    {
                        forum_name: 'Drawings',
                        forum_id: 6
                    }
                ]
            }
        ],
        loading: 'Loading...',
        by: 'By',
        comments: 'Comments',
        views: 'Views',
        loadingImg: 'https://imgur.com/oBkwUIV.gif',
        numberPosts: 7,
        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 {' +
            '  margin: 11px 0;' +
            '  padding: 5px;' +
            ' background-color: #b3280a;' +
            '  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;' +
            '}' +
 
            '.recent-tabs .sub-menu {' +
            '  display: none; ' +
            ' margin: 0;' +
            '}' +
   
          ' .active_menu {' +
          ' display: block !important' +
        ' }' +
 
            '.recent-tabs .sub-menu li {' +
            '  margin: 0;' +
            '}' +
 
            '.recent-tabs .sub-menu li a {' +
            ' display: block;' +
            '  padding: 10px 15px;' +
            '  text-decoration: none;' +
            '  color: #fff !important;' +
            '    cursor: pointer;' +
            '  border-radius: 0;' +
            '}' +
 
            '.recent-tabs .sub-menu li a:hover {' +
            '  background-color: rgba(0, 0, 0, 0.3);' +
            '}' +
 
            '.recent-tabs .sub-menu li a.active {' +
            ' background-color: #fefefe;' +
            '  font-weight: 600;' +
            '  color: #428bca !important;' +
            '}' +
 
            '</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(),
            imageOfTopic = oThis.closest("tr").find("td.tcl.tdtopics span+img")[0].attributes[0].nodeValue,
                            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">' + '<img class="image_of_topic" src=' + imageOfTopic + '>' + 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
            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 = "";
                }
 
                var $menu = $('<li>' +
                    '    <a href="javascript:void(0)" onclick="recentPosts.request(this)" class="request-topics' + activeMenu + '" attr-data="' + item.forum_id + '">' + item.forum_name + '</a>' +
                    '</li>');
 
                if (item.subforums && item.subforums.length > 0) {
                    $menu.find("a").append('<button class="sub-menu-button">+</button>');
                    var $subMenu = $('<ul class="sub-menu"></ul>');
                    for (var j in item.subforums) {
                        var subItem = item.subforums[j];
                        $subMenu.append('<li>' +
                            '    <a href="javascript:void(0)" onclick="recentPosts.request(this)" class="request-topics" attr-data="' + subItem.forum_id + '">' + subItem.forum_name + '</a>' +
                            '</li>');
                    }
                    $menu.append($subMenu);
                }
 
                recentPosts.recent.find(".recent-tabs").append($menu);
            }
 
            $(".sub-menu-button").click(function() {
              $(".recent-tabs .sub-menu").toggleClass('active_menu');
            });
 
        },
    };
    recentPosts.initialize();
})();
</script>


Recent Topics of a specific forum Screen51
Razor12345
Razor12345
Support Moderator
Support Moderator

Male Posts : 1526
Reputation : 264
Language : Ukr, Rus, Eng
Location : Ukraine

Back to top Go down

Solved Re: Recent Topics of a specific forum

Post by Sir Chivas™ June 28th 2023, 2:53 pm

Hi,


It was wrapped in the script tags, not sure why the code tweaked. I cleared my cookies. I'll be back later from work to play around with it. I'll leave this open to confirm later today. Thank you for your help, razor! Have a wonderful day.

Regards,
Sir Chivas.
Sir Chivas™
Sir Chivas™
Helper
Helper

Male Posts : 6983
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

https://aforums.org

Back to top Go down

Solved Re: Recent Topics of a specific forum

Post by Razor12345 June 28th 2023, 3:30 pm

I found a mistake.
Here is the corrected code:

Code:
(function() {
    recentPosts = {
        initialize: function() {
            $(function() {
                recentPosts.setupRecentPosts();
            });
        },
        forums: [
            {
                active: true, // Selected as active
                forum_name: 'Rules | Guidelines',
                forum_id: 1
            },
            {
                forum_name: 'Arts | Graphics',
                forum_id: 10000,
                subforums: [
                    {
                        forum_name: 'Artwork Images',
                        forum_id: 5
                    },
                    {
                        forum_name: 'Drawings',
                        forum_id: 6
                    }
                ]
            },
          {
                forum_name: 'Games',
                forum_id: 10001,
                subforums: [
                    {
                        forum_name: 'RPG',
                        forum_id: 7
                    },
                    {
                        forum_name: 'Horror',
                        forum_id: 8
                    }
                ]
            }
        ],
        loading: 'Loading...',
        by: 'By',
        comments: 'Comments',
        views: 'Views',
        loadingImg: 'https://imgur.com/oBkwUIV.gif',
        numberPosts: 7,
        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 {' +
            '  margin: 11px 0;' +
            '  padding: 5px;' +
            ' background-color: #b3280a;' +
            '  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;' +
            '}' +
 
            '.recent-tabs .sub-menu {' +
            '  display: none; ' +
            ' margin: 0;' +
            '}' +
   
          ' .active_menu {' +
          ' display: block !important' +
        ' }' +
 
            '.recent-tabs .sub-menu li {' +
            '  margin: 0;' +
            '}' +
 
            '.recent-tabs .sub-menu li a {' +
            ' display: block;' +
            '  padding: 10px 15px;' +
            '  text-decoration: none;' +
            '  color: #fff !important;' +
            '    cursor: pointer;' +
            '  border-radius: 0;' +
            '}' +
 
            '.recent-tabs .sub-menu li a:hover {' +
            '  background-color: rgba(0, 0, 0, 0.3);' +
            '}' +
 
            '.recent-tabs .sub-menu li a.active {' +
            ' background-color: #fefefe;' +
            '  font-weight: 600;' +
            '  color: #428bca !important;' +
            '}' +
 
            '</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(),
            imageOfTopic = oThis.closest("tr").find("td.tcl.tdtopics span+img")[0].attributes[0].nodeValue,
                            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">' + '<img class="image_of_topic" src=' + imageOfTopic + '>' + 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
            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 = "";
                }
             
              if (item.subforums && item.subforums.length > 0) {
 
                var $menu = $('<li>' +
                    '    <a href="javascript:void(0)" onclick="recentPosts.request(this)" class="request-topics' + activeMenu + '" attr-data="' + item.forum_id + '">' + item.forum_name + '</a>' + '<button class="sub-menu-button">+</button> ' +
                    '</li>');
                var $subMenu = $('<ul class="sub-menu"></ul>');
                    for (var j in item.subforums) {
                        var subItem = item.subforums[j];
                        $subMenu.append('<li>' +
                            '    <a href="javascript:void(0)" onclick="recentPosts.request(this)" class="request-topics" attr-data="' + subItem.forum_id + '">' + subItem.forum_name + '</a>' +
                            '</li>');
                    }
                    $menu.append($subMenu);
              } else {
                var $menu = $('<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.recent.find(".recent-tabs").append($menu);
            }
 
            $(".recent-tabs").on("click", ".sub-menu-button", function() {
    $(this).siblings(".sub-menu").toggleClass('active_menu');
});
 
        },
    };
    recentPosts.initialize();
})();

The error was a delegation violation. Clicking on one button would open all the lists.

Result:

Recent Topics of a specific forum Scree204


Recent Topics of a specific forum Screen51
Razor12345
Razor12345
Support Moderator
Support Moderator

Male Posts : 1526
Reputation : 264
Language : Ukr, Rus, Eng
Location : Ukraine

Sir Chivas™, TonnyKamper and poesia-verses like this post

Back to top Go down

Solved Re: Recent Topics of a specific forum

Post by Sir Chivas™ June 29th 2023, 4:51 am

Just got home, let me play around with it and I'll get back to you. I really appreciate the assist, Razor.




Edited:


This is exactly what I was aiming for, Razor. You're wizard! However, can we make a few changes and updates. I would like for each Category title to actually not display content. Only when its clicked on the actual list, it'll drop down and then you'll select whichever section and you'll be able to see the content then.


Let me try to demonstrate what I'm trying to aim for. Explaining isn't a strong suit for me. scratch


So we'll have the categories:

> + Arts | Graphics (doesn't display content)
> + Business | Jobs (doesn't display content)
> + Computer | Internet (doesn't display content)
> + Entertainment | Music (doesn't display content)
> + Games | RPG (doesn't display content)
> + Other (doesn't display content)
> + Sports | Hobbies (doesn't display content)
> + Social Media (doesn't display content)

- - - - - - - - Once clicked on - - - - - - - - -
> + Arts | Graphics (doesn't display content)
> + Business | Jobs (doesn't display content)
> + Computer | Internet (doesn't display content)
• Blogs (once clicked on preference, it'll display the content)
• Computer Parts (once clicked on preference, it'll display the content)
• Forum Services (once clicked on preference, it'll display the content) ex: AForum with topic icon
• Software's (once clicked on preference, it'll display the content)
• Websites (once clicked on preference, it'll display the content)
> + Entertainment | Music (doesn't display content)
> + Games | RPG (doesn't display content)
> + Other (doesn't display content)
> + Sports | Hobbies (doesn't display content)
> + Social Media (doesn't display content)



I've ran a few test, created fake threads to visualize it and I came across that once it has more than one topic in the section, it doesn't display properly:
Recent Topics of a specific forum Firesh18
Sir Chivas™
Sir Chivas™
Helper
Helper

Male Posts : 6983
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

https://aforums.org

Back to top Go down

Solved Re: Recent Topics of a specific forum

Post by Razor12345 June 29th 2023, 9:45 am

Try this CSS code:
You can insert it in AP - Display - Colors&CSS - CSS Stylesheet

Code:
.loaded-recent li {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}

Result:

Recent Topics of a specific forum Scree210

--------------

In the code I suggested to you, categories that have subcategories have a large id:

Code:
forum_name: 'Arts | Graphics',
                forum_id: 10000,

So it is unlikely that you have a forum with the number 1000 in the address.

For example, you now have a Games section - when you click on it, nothing loads.

Recent Topics of a specific forum Scree209

However, in the Arts section - the topic, which is a global announcement, is loaded. Try changing the status of the topic from a global announcement to a different one.


Recent Topics of a specific forum Screen51
Razor12345
Razor12345
Support Moderator
Support Moderator

Male Posts : 1526
Reputation : 264
Language : Ukr, Rus, Eng
Location : Ukraine

Sir Chivas™ likes this post

Back to top Go down

Solved Re: Recent Topics of a specific forum

Post by Sir Chivas™ June 29th 2023, 5:01 pm

I've add the CSS to the HTML page. Unfortunately, since the forum is heavily modified I do not longer have space to add any extra CSS. I've already tried to compress the CSS as much as possible, but either way. Confused


That fixed the displaying issue of the topic icons.

Can we move the "+" button on/before + Arts | Graphics, + Games | RPG


That way there's no space between the category and subcategories when the list drops. So, the list will drop down once the Category is clicked on. If it's not possible, it's okay.



Like this, but on the left side.
Recent Topics of a specific forum Scree202
Sir Chivas™
Sir Chivas™
Helper
Helper

Male Posts : 6983
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

https://aforums.org

Back to top Go down

Solved Re: Recent Topics of a specific forum

Post by Razor12345 June 29th 2023, 5:25 pm

First variant:

Add CSS code
Code:
button.sub-menu-button {
    position: relative;
    bottom: 30px;
    left: 70%;
}

Result:

Recent Topics of a specific forum Scree213

Second variant:

Code:
button.sub-menu-button {
    position: absolute;
    top: 8px;
    right: 30%;
}

The result is almost the same as in the first variant, only the distance between category and subcategory is smaller

Third variant:

In this variant, the place of the subcategories is changed

Find:

Code:
 '.recent-tabs li, .recent-tabs li a {' +
            '  display: block;' +
            '  position: relative;' +
            '}' +

Replace it with

Code:
'.recent-tabs li, .recent-tabs li a {' +
            '  display: flex;' +
            '  position: relative;' +
             ' align-items: center; '+
         ' justify-content: stretch; ' +
            '}' +

Result:

Recent Topics of a specific forum Scree214


Recent Topics of a specific forum Screen51
Razor12345
Razor12345
Support Moderator
Support Moderator

Male Posts : 1526
Reputation : 264
Language : Ukr, Rus, Eng
Location : Ukraine

Back to top Go down

Solved Re: Recent Topics of a specific forum

Post by Sir Chivas™ June 30th 2023, 3:26 am

Thank you for the extra variants. You gave me options to play with. This can be closed. You've done a wonderful job assisting me, Razor. I'm glad you're part of the Forumotion team. thumleft


Edit: I've actually bumped into an error. Once I try adding the third category, the whole recent topics table disappears. Let me finish it up and I'll post to code to see where I'm messing up. blackeye
Sir Chivas™
Sir Chivas™
Helper
Helper

Male Posts : 6983
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

https://aforums.org

Back to top Go down

Solved Re: Recent Topics of a specific forum

Post by Razor12345 June 30th 2023, 9:53 am

I corrected your code:

Code:
(function() {
    recentPosts = {
        initialize: function() {
            $(function() {
                recentPosts.setupRecentPosts();
            });
        },
          forums: [
            {
                active: true, // Selected as active
                forum_name: 'Link Directory Rules | Guidelines',
                forum_id: 9
            },
            {
                forum_name: '<em class="fa fa-paint-brush"></em> Arts | Graphics',
                forum_id: 11,
                subforums: [
                    {
                        forum_name: '<em class="fa fa-paint-brush"></em> Artwork Images',
                        forum_id: 44
                    },
                    {
                        forum_name: '<em class="fa fa-paint-brush"></em> Drawings',
                        forum_id: 70
                    },
                    {
                        forum_name: '<em class="fa fa-paint-brush"></em> G-Design Portfolio',
                        forum_id: 71
                    },
{
                        forum_name: '<em class="fa fa-paint-brush"></em> Graphic Services',
                        forum_id: 72
                    },
{
                        forum_name: '<em class="fa fa-paint-brush"></em> Theme Designs',
                        forum_id: 62
                    },
                  ]
          },

          {
                forum_name: '<em class="fa fa-briefcase"></em> Business | Jobs',
                forum_id: 10001,
                subforums: [
                    {
                        forum_name: '<em class="fa fa-briefcase"></em> Electrical Companies',
                        forum_id: 73
                    },
                    {
                        forum_name: '<em class="fa fa-briefcase"></em> Construction Companies',
                        forum_id: 74
                    },
 {
                        forum_name: '<em class="fa fa-briefcase"></em> HVACR Companies',
                        forum_id: 75
                    },
 {
                        forum_name: '<em class="fa fa-briefcase"></em> Other Companies',
                        forum_id: 77
                    },
 {
                        forum_name: '<em class="fa fa-briefcase"></em> Plumbing Companies',
                        forum_id: 78
                    },
                 
                  ]
            },
{
                forum_name: '<em class="fa fa-internet-explorer"></em> Computers | Internet',
                forum_id: 10002,
                subforums: [
                    {
                        forum_name: '<em class="fa fa-internet-explorer"></em> Blogs',
                        forum_id: 64
                    },
                    {
                        forum_name: '<em class="fa fa-internet-explorer"></em> Computer Parts',
                        forum_id: 66
                    },
               
            {
                forum_name: '<em class="fa fa-internet-explorer"></em> Forum Services',
                forum_id: 67
            },
  {
                forum_name: '<em class="fa fa-internet-explorer"></em> Softwares',
                forum_id: 68
            },
  {
                forum_name: '<em class="fa fa-internet-explorer"></em> Websites',
                forum_id: 69
            },
                    ]
                  },
{
                forum_name: '<em class="fa fa-internet-explorer"></em> Entertainment | Music',
                forum_id: 10003,
                subforums: [
                    {
                forum_name: '<em class="fa fa-video-camera"></em> Films',
                forum_id: 80
            },
 {
                forum_name: '<em class="fa fa-video-camera"></em> Movies',
                forum_id: 81
            },
 {
                forum_name: '<em class="fa fa-video-camera"></em> Music',
                forum_id: 82
            },
 {
                forum_name: '<em class="fa fa-video-camera"></em> Other',
                forum_id: 83
            },
 {
                forum_name: '<em class="fa fa-video-camera"></em> Tv Shows',
                forum_id: 84
            },
                  ]
},
{
                forum_name: '<em class="fa fa-gamepad"></em> Games | RPG',
                forum_id: 10004,
                subforums: [
                  {
                forum_name: '<em class="fa fa-gamepad"></em> Board Games',
                forum_id: 10
            },
 {
                forum_name: '<em class="fa fa-gamepad"></em> Fantasy RP',
                forum_id: 12
            },
 {
                forum_name: '<em class="fa fa-gamepad"></em> PC Games',
                forum_id: 14
            },
 {
                forum_name: '<em class="fa fa-gamepad"></em> PlayStation Games',
                forum_id: 47
            },
 {
                forum_name: '<em class="fa fa-gamepad"></em> Xbox Games',
                forum_id: 76
            },
                  ]
                  },
{
                forum_name: '<em class="fa fa-list-ol"></em> Other',
                forum_id: 10005,
                subforums: [
                  {
                forum_name: '<em class="fa fa-list-ol"></em> Miscellaneous',
                forum_id: 87
            },
                ]
            }
        ],
        loading: 'Loading...',
        by: 'By',
        comments: 'Comments',
        views: 'Views',
        loadingImg: 'https://imgur.com/oBkwUIV.gif',
        numberPosts: 7,
        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 {' +
            '  margin: 11px 0;' +
            '  padding: 5px;' +
            ' background-color: #b3280a;' +
            '  display: -webkit-box;' +
            '}' +
            '#recent-topics, .loaded-recent, .loaded-topics {' +
            '  border-radius: 4px;' +
            '}' +
            '.recent-tabs {' +
            '  margin-top: 0px;' +
            '  margin-right: -3px;' +
            '  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;' +
' margin-bottom: 7px;' +
  ' margin-top: 7px;' +
            '}' +
            '.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;' +
            '}' +
 
            '.recent-tabs .sub-menu {' +
            '  display: none; ' +
            ' margin: 0;' +
            '}' +
 
          ' .active_menu {' +
          ' display: block !important' +
        ' }' +
 
            '.recent-tabs .sub-menu li {' +
            '  margin: 0;' +
            '}' +
 
            '.recent-tabs .sub-menu li a {' +
            ' display: block;' +
            '  padding: 10px 15px;' +
            '  text-decoration: none;' +
            '  color: #fff !important;' +
            '    cursor: pointer;' +
            '  border-radius: 0;' +
            '}' +
 
            '.recent-tabs .sub-menu li a:hover {' +
            '  background-color: rgba(0, 0, 0, 0.3);' +
            '}' +
 
            '.recent-tabs .sub-menu li a.active {' +
            ' background-color: #fefefe;' +
            '  font-weight: 600;' +
            '  color: #428bca !important;' +
            '}' +
 
            '</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(),
            imageOfTopic = oThis.closest("tr").find("td.tcl.tdtopics span+img")[0].attributes[0].nodeValue,
                            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">' + '<img class="image_of_topic" src=' + imageOfTopic + '>' + 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
            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 = "";
                }
           
              if (item.subforums && item.subforums.length > 0) {
 
                var $menu = $('<li>' +
                    '    <a href="javascript:void(0)" onclick="recentPosts.request(this)" class="request-topics' + activeMenu + '" attr-data="' + item.forum_id + '">' + item.forum_name + '</a>' + '<button class="sub-menu-button">+</button> ' +
                    '</li>');
                var $subMenu = $('<ul class="sub-menu"></ul>');
                    for (var j in item.subforums) {
                        var subItem = item.subforums[j];
                        $subMenu.append('<li>' +
                            '    <a href="javascript:void(0)" onclick="recentPosts.request(this)" class="request-topics" attr-data="' + subItem.forum_id + '">' + subItem.forum_name + '</a>' +
                            '</li>');
                    }
                    $menu.append($subMenu);
              } else {
                var $menu = $('<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.recent.find(".recent-tabs").append($menu);
            }
 
            $(".recent-tabs").on("click", ".sub-menu-button", function() {
    $(this).siblings(".sub-menu").toggleClass('active_menu');
});
 
        },
    };
    recentPosts.initialize();
})();

Result:

Recent Topics of a specific forum Scree216

I will take this part of the code as an example:

Code:
{
                forum_name: '<em class="fa fa-internet-explorer"></em> Entertainment | Music',
                forum_id: 10003,
                subforums: [
                    {
                forum_name: '<em class="fa fa-video-camera"></em> Films',
                forum_id: 80
            },
 {
                forum_name: '<em class="fa fa-video-camera"></em> Movies',
                forum_id: 81
            },
 {
                forum_name: '<em class="fa fa-video-camera"></em> Music',
                forum_id: 82
            },
 {
                forum_name: '<em class="fa fa-video-camera"></em> Other',
                forum_id: 83
            },
 {
                forum_name: '<em class="fa fa-video-camera"></em> Tv Shows',
                forum_id: 84
            },
           

This part of the code has an object with three fields. The third field is an array (subforums) of objects.

Note the brackets of the array - there are opening brackets, but closing brackets?

Also, note that you have this entire object without the closing bracket "}"


Recent Topics of a specific forum Screen51
Razor12345
Razor12345
Support Moderator
Support Moderator

Male Posts : 1526
Reputation : 264
Language : Ukr, Rus, Eng
Location : Ukraine

Sir Chivas™ likes this post

Back to top Go down

Solved Re: Recent Topics of a specific forum

Post by Sir Chivas™ July 3rd 2023, 8:31 am

I really appreciate the help, Razor. I really like how you took your time to explain to me my mistake. I knew I had a missing either open or close bracket I just couldn't see where! I've also been on medication, so I had to get a fresh set of eyes. Once again, thank you. I think I can handle the rest from here. If I bump into anything else, I'll shoot you a message to reopen this thread. For now, we can close this!


Many thanks, Razor.
Sir Chivas™
Sir Chivas™
Helper
Helper

Male Posts : 6983
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

https://aforums.org

SLGray likes this post

Back to top Go down

Solved Re: Recent Topics of a specific forum

Post by Razor12345 July 3rd 2023, 8:45 am

You are welcome!

Problem solved & topic archived.
Please read our forum rules: ESF General Rules


Recent Topics of a specific forum Screen51
Razor12345
Razor12345
Support Moderator
Support Moderator

Male Posts : 1526
Reputation : 264
Language : Ukr, Rus, Eng
Location : Ukraine

Back to top Go down

Solved Re: Recent Topics of a specific forum

Post by Razor12345 March 5th 2024, 9:45 am

Sir Chivas™ wrote:So unfortunately that I changed forum version, the script you had written for me stopped working. If it's not too much to ask if you can write it for awesomeBB

At the author's request, the topic has been reopened


Recent Topics of a specific forum Screen51
Razor12345
Razor12345
Support Moderator
Support Moderator

Male Posts : 1526
Reputation : 264
Language : Ukr, Rus, Eng
Location : Ukraine

Sir Chivas™ likes this post

Back to top Go down

Solved Re: Recent Topics of a specific forum

Post by Sir Chivas™ March 5th 2024, 7:01 pm

Hi Razor:

It should display and be in the HTML page called "Link Directory" it was right above where the blinking text is.
https://www.aforums.org/h10-link-directory

I can't seem to post the code, it says its too long. But it's all in the HTML page. Do you still have access to the founder account on this forum? : https://aforums.org
Sir Chivas™
Sir Chivas™
Helper
Helper

Male Posts : 6983
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

https://aforums.org

Back to top Go down

Solved Re: Recent Topics of a specific forum

Post by Razor12345 March 7th 2024, 10:55 am

The problem was just in the id.
The page container id in phpbb3 -
Code:
#main-content
AwesomeBB container id -
Code:
#wrap

This line:

Code:
$(recentPosts.recent).prependTo("#main-content");

Replace by this:

Code:
$(recentPosts.recent).prependTo("#wrap");

Result:

Recent Topics of a specific forum Scree770


Recent Topics of a specific forum Screen51
Razor12345
Razor12345
Support Moderator
Support Moderator

Male Posts : 1526
Reputation : 264
Language : Ukr, Rus, Eng
Location : Ukraine

Sir Chivas™ and TonnyKamper like this post

Back to top Go down

Solved Re: Recent Topics of a specific forum

Post by Sir Chivas™ March 8th 2024, 5:54 pm

I'd figure it had to do something with the forum version, I thought you had to rewrite the script. I didn't know that line was the issue. Again, thank you for the explanation, Razor. I need to learn how to read JS. Embarassed
Sir Chivas™
Sir Chivas™
Helper
Helper

Male Posts : 6983
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

https://aforums.org

Razor12345 likes this post

Back to top Go down

Solved Re: Recent Topics of a specific forum

Post by skouliki March 8th 2024, 6:20 pm

Problem solved & topic archived.
Please read our forum rules: ESF General Rules
skouliki
skouliki
Manager
Manager

Female Posts : 15246
Reputation : 1700
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum