Community Forum

User info

Welcome, Guest! Please login or register.


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


Javascript Extensions

Posts 1 to 9 of 9

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.

+1

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>Autor</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

I need image upload code for new posts

0

7

Wins
http://sk.uploads.im/LaDK3.png

Code:
[img]URL of Image[/img]

Last edited by kami (2017-04-09 04:23:31)

0

8

C3La-NS wrote:

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

Code:

Installation: Administration --> Options --> HTML footer area.


its not working but it shows custom color option  in reply -box when i click on it no function . there is no extra color option appear

0

9

study.mybb.online
May I have a link of your forum, I'll try to fix it.

0

Related topics


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