Community Forum

User info

Welcome, Guest! Please login or register.


You are here » Community Forum » New Forum Features » Javascript Extensions


Javascript Extensions

Posts 1 to 8 of 8

1

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.

+2

2

Recent Posts on the main page by Alex_63. (Translated by C3La-NS)
http://imgur.com/AMwnsz0.png

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>

+1

3

Disallow guests to view user profiles by Alex_63. (Translated by C3La-NS)
Updated code with no-script protection
http://imgur.com/POQRfsM.png
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=' &nbsp;<a href="/">'+s1+'</a> &nbsp;'+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>

0

4

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

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>

+1

5

Custom Colors for reply-box (by Romych)
This Javascript extension allows you to pick up any color you want.
How it works:

http://imgur.com/pcu20sz.gif

http://imgur.com/VCd5ATo.png

Code:

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.

0

6

SUB-FORUMS with Auto-Setting

I. Pre-SettingAt first set this option in Settings: (Administration > Options > Time and timeoutsRedirect 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 = 'http://forumfiles.ru/files/0016/4f/7e/12924.jpg';  // Subforums icon without new messages
SUBF.icon_new = '
http://forumfiles.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 - enabled

SUBFset.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='http://forumfiles.ru/files/0017/9e/c1/40123.js';document.write(s+l+e);}());
</script><link rel="stylesheet" type="text/css" href="http://forumfiles.ru/files/0016/4f/7e/73859.css"/>
<script type="text/javascript" src="http://forumfiles.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>

0

7

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.

0

8

Selection of code in "Code" box
(version of 2017)
http://sk.uploads.im/BDnUL.png

To HTML header:

<!-- Selection of code in "Code" box // Alex_63, ver. 2017 -->
<script type="text/javascript" src="http://forumfiles.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".

0


You are here » Community Forum » New Forum Features » Javascript Extensions