Community Forum |
You are here » Community Forum » New Forum Features » Javascript Extensions
Your forum is a powerful tool which allows you to make almost any changes you want. In this topic, I suggest posting any helpful Javascript Extensions that will make your forums even more flexible.
Please restrain from asking questions here. New forum features only.
Recent Posts on the main page by Alex_63. (Translated by C3La-NS)
This script adds recent 10 (expendable up to 20) posts of your forum to the Forum Statistics area on the main mage.
Installation: Administration --> Options --> HTML footer area.
Code:
<!-- Recent posts © Alex_63 -->
<style>
.container.stats {margin-bottom: -13px;}
.stats table {
padding: 0 !important;
margin-top:7px;
width: 100%;
}
.stats table th {text-align: left;}
.stats table td {
padding: .5em;
border-top-style: solid;
border-top-width: 1px;
}
.stats .t-head {font-weight: 700}
</style>
<script src="/export.php?type=js&max=30" type="text/javascript"></script>
<script type="text/javascript">
(function() {
var numPosts = 10; // Total amount of posts (no more than 20)
var html = '',html0 = '<div class="container stats"><span class="t-head">\
Recent forum posts</span><table cellspacing="0" class="container">\
<thead><tr><th>Author</th><th>Time</th><th>Post</th></tr>\
</thead><tbody class="hasicon">';for(var i=0;i<content.length;i++){
var s0=content[i][0],s1=content[i][1];s2=content[i][2];s3=content[i][3];
var ts = new Date();ts.setTime(1000*s0),mo=ts.getMonth()+1;
if (mo<10) {mo='0'+mo;}var hh = ts.getHours(),mm = ts.getMinutes()+'';
if (mm<10) {mm='0'+mm;}ts = ts.getDate()+'.'+mo+' '+hh+':'+mm;
var a = '<tr><td>'+s1+'</td><td class="tc2">'+ts+'<td class="tcr">\
<a href="'+s2+'" target="_blank">'+s3+'</a><br/></td></tr>';
if(s3.indexOf('·')!=-1||s3.indexOf('¬')!=-1){a=''};html+=a;
} var b = html0+html+'</tr></tbody></table></div><br/>\
<h2><span>General statistics</span></h2>';nP=numPosts-1;
$('.statscon').prepend(b);$('.statscon tbody tr:gt('+nP+')').remove();
}());
</script>
Disallow guests to view user profiles by Alex_63. (Translated by C3La-NS)
Updated code with no-script protection
Installation: Administration --> Options --> HTML header area.
Code:
<style id="HideProfile">.gid3 #pun-profile .main{display:none}</style>
<script type="text/javascript">
if(GroupID==3&&$('#pun-profile').length)$().pun_mainReady(function(){
var s='Information',s1=$('#pun-title h1>span').text();document.title=s1;
var L=' » <a href="/">'+s1+'</a> » '+s;$('.crumbs').html(L);
$().pun_aboutReady(function(){$('#pun-crumbs2>.crumbs').html(L);});
$('#pun-main').html('<h1><span>'+s+'</span></h1><div class=info>\
<div class=container>You have no permission to view this page.\
</div></div>');$('style#HideProfile').remove();});
</script>
Fully Functional Portal Page for MyBB Forums (C3La-NS)
This is a fully functional version of a Portal Page with such features as: displaying recent 50 posts including media-content (images, video, emoticons, etc.), auto-split text after the first paragraph and read-more button, two sidebars for custom content, no-JavaScript mode and some more.
Installation: Create a custom page: administration --> pages and add the following code in the text-area.
Code
<style type="text/css">
div.structure {
width: auto;
}
#bib iframe {max-width: 100%;}
#bib img {max-width: 100%;}
#bib {overflow: hidden;}
.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: 20px 5px;
}
.post_title {
margin-bottom: 5px;
width: auto;
height: auto;
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>Title</center></h1>
<div class="box">Left block</div></div>
<br>
<div class="structure"><h1><center>Title</center></h1>
<div class="box">Left block</div></div></td>
<td class="center" valign="top" width="60%"><div class="structure"><h1><center>News Feed</center></h1>
<div class="boxrss" style="height: auto;">
<script type="text/javascript">
$(function(){
$('div.boxrss').append('<div id="lenta" style="width: 100%; background: white;"><table id="bib" cellspacing="0" width=100% align="center"><tr><th width=100%><b>Recent Posts</b></th></tr></table></tr></table></div>');
$.get('/export.php','',processXML);
function processXML(data){
$(data).find('item:lt(50)').each(function(){
var JAuthor=$(this).find('author').text().slice(14,-1);var JTitle=$(this).find('title').text();
var JLink=$(this).find('link').text();var JCont=$(this).find('description').text().split('\n',1);
var JPosted=$(this).find('pubDate').text().slice(4,-9);
$('#bib').append('<tr><td><div class="post_title"><p><strong><span style="font-size: small;">'+JTitle+'</span></strong></p><div><span style="float: right;">'+JPosted+' | Posted by: '+ JAuthor +'</span><br></div></div></br></br>'+JCont+'</br><a href="'+ JLink +'" title="'+JTitle+'">Read More »</a></td></tr>'); });
} });
</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>Right Title</center></h1>
<div class="box">Right Block</div></div>
<br>
<div class="structure"><h1><center>Right Title</center></h1>
<div class="box">Right Block</div></div>
</td>
</tr>
</tbody>
</table>Custom Colors for reply-box (by Romych)
This Javascript extension allows you to pick up any color you want.
How it works:
|
|
Code:
<!-- Additional colors (NEW) -->
<style type="text/css">
input[type=color]::-webkit-color-swatch {background-color: transparent !important; border:none;}
input[type=color]::-moz-color-swatch {background-color: transparent !important; border:none;}
#litr{background: url(http://data.colorzilla.com/images/logo.png) no-repeat scroll 0 0 / cover ;}
</style>
<script type="text/javascript">
$('#color-area tr').append('<td><input type="color" id="litr" style="cursor:pointer;padding:0;width:22px;" title="Custom clors" value="#ffa500"></td>');$('#litr').change(function(){bbcode('[color=+this.value+]','[/color]');});
</script>Installation: Administration --> Options --> HTML footer area.
SUB-FORUMS with Auto-Setting
I. Pre-SettingAt first set this option in Settings: (Administration > Options > Time and timeouts) Redirect time = 1
II. Code installationThe code consists of two parts:
1. To top of HTML header
<!-- Subforums "no script" © Alex_63 / P.1 to top of HTML header -->
<script type="text/javascript">var SUBF = {},SUBFset = {};
// Script Settings //SUBF.icon_old = 'https://forumstatic.ru/files/0016/4f/7e/12924.jpg'; // Subforums icon without new messages
SUBF.icon_new = 'https://forumstatic.ru/files/0016/4f/7e/75803.jpg'; // Subforums icon with new messages
SUBF.d_title = 'Subforums:' // The text in the subforums section header
SUBF.category_link = 1; // Clickability of categories: 0 - disabled, 1 - enabledSUBFset.enable_subf = 1; // Subforums installation: 0 - manual, 1 - automatic
$(document).ready(function(){$('#navadmin>a').attr('href','/admin/index');});
if(document.URL.indexOf('/admin/')!=-1)(function(){var s='<script type="text/javascript" src="',
e='"></'+'script>',l='https://forumstatic.ru/files/0017/9e/c1/40123.js';document.write(s+l+e);}());
</script><link rel="stylesheet" type="text/css" href="https://forumstatic.ru/files/0016/4f/7e/73859.css"/>
<script type="text/javascript" src="https://forumstatic.ru/files/0017/9e/c1/73858.js"></script>
2. To top of HTML footer
<!-- Subforums "no script" © Alex_63 / P.2 to top of HTML footer -->
<script type="text/javascript">setSubforums()</script>
Additional style - to the end of "Structure style.css"
/************* Subforums Auto-Setting | Add styles *************/
.punbb-admin:not(.admin-visible)::before {
content: "You are in the administration panel without addons. Auto-setting of subforums is disabled.";
color: #c22d2d; display: block; text-align: center; border: solid 1px #d48f8f; padding: 5px; margin-bottom: 5px; background: #f8e5e5;
}
Script settings:
SUBF.icon_old - subforum icon without new posts
SUBF.icon_new - subforum icon with new posts
SUBF.d_title - the text in the subforums section header
SUBFset.enable_subf - mode of subforums installation: 0 - manual, 1 - automatic
BONUS: Ability of setting your own codes to HTML header and HTML footer in Admin-Panel!
For this set two containers (the code below) to HTML header upper than the first part of subforum script:
<noscript data="html_header">
<!-- Content of HTML header in Admin-Panel -->
</noscript><noscript data="html_footer">
<!-- Content of HTML footer in Admin-Panel -->
</noscript>
C3La-NS
study.mybb.online
kami
Just created the topic for requests, please write your questions/answers here Requests for Scripts
All the posts not containing new codes are moved to that topic.
Selection of code in "Code" box
(version of 2017)
To HTML header:
<!-- Selection of code in "Code" box // © Alex_63, ver. 2017 -->
<script type="text/javascript" src="https://forumstatic.ru/files/0015/c4/3f/26102.js"></script>
<script type="text/javascript">select_text.linkText = 'Select code' //text of link</script>
In red - your text for the link of selection code, by default the text is "Select code".
You are here » Community Forum » New Forum Features » Javascript Extensions