Tutorial - Thread Pop Up on Index

[Snoctriz]

This script fetches new threads from a MyBB forum using AJAX and displays them in a popup on a web page. Here's a breakdown of what each part of the script does:

[*]Fetching New Threads:

• The script sends an AJAX request to a PHP file (mybb_threads.php) on the server to fetch new threads from the MyBB forum.
  
• The PHP file queries the MyBB database for threads created within the last 24 hours and returns them as JSON data.
  

[*]Creating the Popup:

• Once the AJAX request completes successfully, the script creates a popup (<div>) element and appends it to the document body.
  
• The popup is styled to appear at the bottom right corner of the page and has a clean, minimalistic design.
  

[*]Displaying Threads:

• The script iterates over the fetched threads and adds them to the popup one by one.
  
• Each thread is displayed as a list item (<li>) containing a link (<a>) to the thread on the MyBB forum.
  
• The threads are displayed sequentially with a delay of 2 seconds between each thread, giving a nice effect of them appearing one by one.
  

[*]Sound Notification:

• For each thread that is displayed, the script plays a notification sound to alert the user to the new thread.
  
• The sound file (notification.mp3) is played using the HTML5 Audio API.
  

[*]Popup Visibility:

• The popup remains visible on the screen until all threads have been displayed.
  
• After all threads have been displayed, the popup automatically disappears after 2 seconds, giving the user enough time to see the new threads.
  

[*]Overall, this script provides a user-friendly way to notify website visitors of new threads on a MyBB forum, allowing them to easily navigate to the new content.

[*]Instructions:
[*]1. Create a file in your Cpanel called:

mybb_threads.php

Put this code in it:

<?php
define('IN_MYBB', 1);
require_once 'global.php';
// Query to fetch new threads
$query = $db->simple_select('threads', 'tid, subject', 'dateline > ' . (TIME_NOW - 86400));
$threads = [];
while ($thread = $db->fetch_array($query)) {
    $threads[] = [
        'url' => 'showthread.php?tid=' . $thread['tid'],
        'title' => $thread['subject']
    ];
}
// Output threads as JSON
header('Content-Type: application/json');
echo json_encode($threads);

2. Create this file popup.js
Put this code in it:

document.addEventListener('DOMContentLoaded', function() {
    // Fetch new threads from MyBB using AJAX
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            var threads = JSON.parse(this.responseText);
            // Create a popup div
            var popup = document.createElement('div');
            popup.id = 'mybb-threads-popup';
            popup.innerHTML = '<h2>New Threads</h2><ul></ul>';
            document.body.appendChild(popup);
            // Show the popup at the bottom right
            popup.style.display = 'block';
            // Display threads one by one and then disappear
            threads.forEach(function(thread, index) {
                setTimeout(function() {
                    var li = document.createElement('li');
                    li.innerHTML = '<a href="' + thread.url + '">' + thread.title + '</a>';
                    popup.querySelector('ul').appendChild(li);
                    // Play a sound notification
                    var audio = new Audio('path_to_notification_sound.mp3');
                    audio.play();
                }, index * 2000); // Display each thread with a delay of 2 seconds
            });
            // Hide the popup after all threads are displayed
            setTimeout(function() {
                popup.style.display = 'none';
            }, threads.length * 2000); // Total time = number of threads * delay
        }
    };
    xmlhttp.open('GET', 'mybb_threads.php', true);
    xmlhttp.send();
});

3. Add this code to your global.css

#mybb-threads-popup {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #f8f9fa;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 10px 20px;
    max-width: 300px;
    max-height: 80vh;
    overflow-y: auto;
    display: none;
    z-index: 9999;
    transition: opacity 0.5s, right 0.5s;
}
#mybb-threads-popup h2 {
    margin-top: 0;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}
#mybb-threads-popup ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
#mybb-threads-popup ul li {
    margin-bottom: 5px;
}
#mybb-threads-popup ul li a {
    text-decoration: none;
    color: #333;
    font-size: 14px;
}
#mybb-threads-popup ul li a:hover {
    text-decoration: underline;
}

4. Add this to your headerinclude:

<script src="path_to_/popup.js"></script>

Should look like this... (Video Preview)
https://jumpshare.com/s/912goNj5aJhYjntfgB0L

[Crazycat]

Thanks but this is not a MyCode. Wrong forum

[Snoctriz]

Thank you, hopefully staff can move this!