How can I make a customized Member Of The Month widget?

First topic message reminder :

Hello all,
How can I make a customized member of the month widget? My forum version is punbb.

Bump

Bump

Bump

Bump

i should have this for you here soon .. waiting for ange to help with the last part of the script

while im waiting could you do ma a favor and make me an account for your site and pm me the info so i can get the info from the profiles on your site to make it work

Merry Christmas Twisted_mods 
I think this code needs a very good knowledge of JavaScript to retrieve those data and also I don't know if it is possible on our forums. Maybe Ange or JScript can help us to make it.

i have already finished it i just need a account on your forum to get the values for the info

Hello @_Twisted_Mods_,
I will PM you a test account details in the next few minutes.

this is missing a few thing so it dont work because you said you wanted to wait on ange .. because i dont have enough skill..... lol im jk its all there

widget code

Code:

$(function() {
    $(function() {
      var user = "2";
      var thetitle = "Member Of The Month";

      var name = "#cp-main > h1:nth-child(1)";
    var d = new Date(),
    n = d.getMonth(),
    y = d.getFullYear();
      var ddate = n+" "+y;
      var joindate = "#field_id-4";
      var bday = "#field_id-12";
      var postt = "#field_id-13";
      var points = "#field_id-6";
      var avatar = "#profile-advanced-right .inner div img";
      var msg1 = 'Congratulations to ';
      var msg2  = ' our member of ';
    var msg3  = '. Joined the first time in this forum ';
    var msg4  = '. He/She celebrates a birthday on ';
    var msg5  = '. He/She has a total of ';
    var msg6  = ' posts. He/She received ';
    var msg7  = ' reputation points. Congratulations to this months member.';
   
      var j = jQuery, info1;
      j('#blah1').load('/u'+user+' #main-content', function() {
        info1 = j(this).find(name).text();            //name
info7= info1.replace('All about ','');
        info2 = j(this).find(joindate+' .field_uneditable').text(); //join date
        info3 = j(this).find(bday+' .field_uneditable').text(); //birthday
        info4 = j(this).find(postt+' .field_uneditable').text(); //points
        info5 = j(this).find(points+' .field_uneditable').text(); //post
        info6 = j(this).find(avatar).attr('src'); //avatar
        $('#nameh strong').text(info7);
        $('.mimp a').attr('href', '/privmsg?mode=post&u='+user);
        $('.mipost a').attr('href', '/spa/'+info7);
          $('#thedate').text(n+ " - " +y);
        $('#motm').text(thetitle);
          $('#tavatar').attr('src', info6);

        $('#pprofile').append(' <a href="/u'+user+'">View Profile</a> ');
          $('#bpart').text(msg1 + info7 + msg2 + n+ " - " +y+ msg3 +info2 + msg4 + info3 + msg5+ info5 + msg6 + info4 + msg7);
      });
    });
});

javascript

Code:


$(function() {
    $(function() {
      var user = "1";
      var thetitle = "Member Of The Month";

      var name = ".subtitle";
    var d = new Date(),
    n = d.getMonth(),
    y = d.getFullYear();
      var ddate = n+" "+y;
      var joindate = "#field_id-4";
      var bday = "#field_id-12";
      var postt = "#field_id-13";
      var points = "#field_id-6";
      var avatar = "#profile-advanced-right .inner div img";
      var msg1 = 'Congratulations to ';
      var msg2  = ' our member of ';
    var msg3  = '. Joined the first time in this forum ';
    var msg4  = '. He/She celebrates a birthday on ';
    var msg5  = '. He/She has a total of ';
    var msg6  = ' posts. He/She received ';
    var msg7  = ' reputation points. Congratulations to this months member.';
   
      var j = jQuery, info1;
      j('#blah1').load('/u'+user+' #main-content', function() {
        info1 = j(this).find(name).text();            //name
        info7= info1.replace('Πληροφορίες για τον/την ','');
        info2 = j(this).find(joindate+' .field_uneditable').text(); //join date
        info3 = j(this).find(bday+' .field_uneditable').text(); //birthday
        info4 = j(this).find(postt+' .field_uneditable').text(); //points
        info5 = j(this).find(points+' .field_uneditable').text(); //post
        info6 = j(this).find(avatar).attr('src'); //avatar
        $('#nameh strong').text(info7);
        $('.mimp a').attr('href', '/privmsg?mode=post&u='+user);
        $('.mipost a').attr('href', '/spa/'+info7);
          $('#thedate').text(n+ " - " +y);
        $('#motm').text(thetitle);
          $('#tavatar').attr('src', info6);

        $('#pprofile').append(' <a href="/u'+user+'">View Profile</a> ');
          $('#bpart').text(msg1 + info7 + msg2 + n+ " - " +y+ msg3 +info2 + msg4 + info3 + msg5+ info5 + msg6 + info4 + msg7);
      });
    });
});

Hello,
Are these two scripts the same? The widget code I think needs the tags <script></script>

no create a new widget place the widget code in it

create a new javascript and place the javascript in it

The widget code needs the tags script because it is displaying the javascript code.

sorry copyed the wrong code for widget



widget code

Code:

<style>
#tavatar{width:50px;}
table{background-color:#262E33;}
.mipost, #nameh{display:inline-block;padding-left:10px}
td,tr{border:none}
hr {
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 1px;
width:100%
}
#bpart{background-color:#ccc;}
#pprofile{
    padding: 2px 5px;
background-color:darkgreen;
    border-radius:6px;
color:white;
font-weight:bolder;
float:right;
}
#thedate {
    padding: 2px 5px;
background-color:darkgreen;
    border-radius:6px;
color:white;
font-weight:bolder;
}
#motm{font-weight:bolder;color:gray;}
</style>
<table>
                
    <tbody>
        <tr>
                    
            <td style="width: 20%;" rowspan="2">
                    <img id="tavatar" src="http://2img.net/i/fa/invision/pp-blank-thumb.png" />                                                                            
            </td>
                    
        </tr>
                
        <tr>
                    
            <td>
                        
                <div id="nameh">
                        <strong>name</strong> <span class="mimp"><a href="/privmsg?mode=post&u=46"><img src="http://i.imgur.com/1B61PFG.png" /></a></span><span class="mipost"><a href="spa/test"><img src="http://i.imgur.com/Ex7KhNG.png" /></a></span><br />                                                                
                    <hr />
                            
                    <div id="motm">
                              motm      
                    </div>
                                                                                                      
                    <div id="thedate">
                              8 - 2014         
                    </div>
                                                                                                      
                </div>
                        
            </td>
                    
        </tr>
                
        <tr>
                    
            <td colspan="2">
                        
                <div id="bpart">
                            
                </div><br />         
                <div id="pprofile">
                            
                </div>
                        
            </td>
                    
        </tr>
                
    </tbody>
</table>
                                                                                      
<div id="blah1" style="display:none;">
     
</div>

javascript

Code:


$(function() {
     $(function() {
      var user = "1";
      var thetitle = "Member Of The Month";

      var name = ".subtitle";
    var d = new Date(),
    n = d.getMonth(),
    y = d.getFullYear();
      var ddate = n+" "+y;
      var joindate = "#field_id-4";
      var bday = "#field_id-12";
      var postt = "#field_id-13";
      var points = "#field_id-6";
      var avatar = "#profile-advanced-right .inner div img";
      var msg1 = 'Congratulations to ';
      var msg2  = ' our member of ';
    var msg3  = '. Joined the first time in this forum ';
    var msg4  = '. He/She celebrates a birthday on ';
    var msg5  = '. He/She has a total of ';
    var msg6  = ' posts. He/She received ';
    var msg7  = ' reputation points. Congratulations to this months member.';
    
      var j = jQuery, info1;
      j('#blah1').load('/u'+user+' #main-content', function() {
        info1 = j(this).find(name).text();            //name
        info7= info1.replace('Πληροφορίες για τον/την ','');
        info2 = j(this).find(joindate+' .field_uneditable').text(); //join date
        info3 = j(this).find(bday+' .field_uneditable').text(); //birthday
        info4 = j(this).find(postt+' .field_uneditable').text(); //points
        info5 = j(this).find(points+' .field_uneditable').text(); //post
        info6 = j(this).find(avatar).attr('src'); //avatar
        $('#nameh strong').text(info7);
        $('.mimp a').attr('href', '/privmsg?mode=post&u='+user);
        $('.mipost a').attr('href', '/spa/'+info7);
          $('#thedate').text(n+ " - " +y);
        $('#motm').text(thetitle);
          $('#tavatar').attr('src', info6);

        $('#pprofile').append(' <a href="/u'+user+'">View Profile</a> ');
          $('#bpart').text(msg1 + info7 + msg2 + n+ " - " +y+ msg3 +info2 + msg4 + info3 + msg5+ info5 + msg6 + info4 + msg7);
      });
    });
});

Now it is displaying but it isn't shows the correct data and member's name, avatar, number of posts, number of thanks etc.

whats link to where the widget is displayed

Do you mean the member's Profile link or id? Because the js founds a specific user.

no i mean where is the widget because i dont see it on the index page

Ahh here it is http://prntscr.com/5l399n

@_Twisted_Mods_ go here to see it because probably you are in the portal of the forum!

Can we display the month like "December" and  not as number like etc 11-2014?

yes

try this script

Code:


$(function() {
    $(function() {
      var user = "1";
      var thetitle = "Member Of The Month";

      var name = "#profile-advanced-right>.main:nth-child(2)>.main-head .h3 span";
        var d = new Date();
var month = new Array();
month[0] = "January";
month[1] = "February";
month[2] = "March";
month[3] = "April";
month[4] = "May";
month[5] = "June";
month[6] = "July";
month[7] = "August";
month[8] = "September";
month[9] = "October";
month[10] = "November";
month[11] = "December";
var n = month[d.getMonth()];
    y = d.getFullYear();
      var ddate = n+" "+y;
      var joindate = "#field_id-4";
      var bday = "#field_id-12";
      var postt = "#field_id-13";
      var points = "#field_id-6";
      var avatar = "#profile-advanced-right .main .main-content img";
      var msg1 = 'Congratulations to ';
      var msg2  = ' our member of ';
    var msg3  = '. Joined the first time in this forum ';
    var msg4  = '. He/She celebrates a birthday on ';
    var msg5  = '. He/She has a total of ';
    var msg6  = ' posts. He/She received ';
    var msg7  = ' reputation points. Congratulations to this months member.';
   
      var j = jQuery, info1;
      j('#blah1').load('/u'+user+' #main-content', function() {
        info1 = j(this).find(name).text();            //name
        info7= info1.replace('Πληροφορίες για τον/την ','');
        info2 = j(this).find(joindate+' .field_uneditable').text(); //join date
        info3 = j(this).find(bday+' .field_uneditable').text(); //birthday
        info4 = j(this).find(postt+' .field_uneditable').text(); //points
        info5 = j(this).find(points+' .field_uneditable').text(); //post
        info6 = j(this).find(avatar).attr('src'); //avatar
        $('#nameh strong').text(info7);
        $('.mimp a').attr('href', '/privmsg?mode=post&u='+user);
        $('.mipost a').attr('href', '/spa/'+info7);
          $('#thedate').text(n+ " - " +y);
        $('#motm').text(thetitle);
          $('#tavatar').attr('src', info6);

        $('#pprofile').append(' <a href="/u'+user+'">View Profile</a> ');
          $('#bpart').text(msg1 + info7 + msg2 + n+ " - " +y+ msg3 +info2 + msg4 + info3 + msg5+ info5 + msg6 + info4 + msg7);
      });
    });
});

Nice its looks perfect @_Twisted_Mods_, now must I change the user id in js each month?
The problem with username and avatar has been solved. Can we add the js in the widget code?

yea you will have to change user = "1" to the # of the user for that month 

i asked ange to have a look to figure out how to add the js in the widget code to make sure im doing it right

Nice,
Thank you very much @_Twisted_Mods_, we have to wait Ange now to complete the code.

This should work :

Code:

<style type="text/css">
#tavatar{width:50px;}
table{background-color:#262E33;}
.mipost, #nameh{display:inline-block;padding-left:10px}
td,tr{border:none}
hr {
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 1px;
width:100%
}
#bpart{background-color:#ccc;}
#pprofile{
    padding: 2px 5px;
background-color:darkgreen;
    border-radius:6px;
color:white;
font-weight:bolder;
float:right;
}
#thedate {
    padding: 2px 5px;
background-color:darkgreen;
    border-radius:6px;
color:white;
font-weight:bolder;
}
#motm{font-weight:bolder;color:gray;}
</style>
<table>
               
    <tbody>
        <tr>
                   
            <td style="width: 20%;" rowspan="2">
                    <img id="tavatar" src="http://2img.net/i/fa/invision/pp-blank-thumb.png" />                                                                           
            </td>
                   
        </tr>
               
        <tr>
                   
            <td>
                       
                <div id="nameh">
                        <strong>name</strong> <span class="mimp"><a href="/privmsg?mode=post&u=46"><img src="http://i.imgur.com/1B61PFG.png" /></a></span><span class="mipost"><a href="spa/test"><img src="http://i.imgur.com/Ex7KhNG.png" /></a></span><br />                                                               
                    <hr />
                           
                    <div id="motm">
                              motm     
                    </div>
                                                                                                     
                    <div id="thedate">
                              8 - 2014       
                    </div>
                                                                                                     
                </div>
                       
            </td>
                   
        </tr>
               
        <tr>
                   
            <td colspan="2">
                       
                <div id="bpart">
                           
                </div><br />       
                <div id="pprofile">
                           
                </div>
                       
            </td>
                   
        </tr>
               
    </tbody>
</table>
                                                                                     
<div id="blah1" style="display:none;">
   
</div>

<script type="text/javascript">
(function() {
      var user = "1";
      var thetitle = "Member Of The Month";

      var name = ".subtitle";
    var d = new Date(),
    n = d.getMonth(),
    y = d.getFullYear();
      var ddate = n+" "+y;
      var joindate = "#field_id-4";
      var bday = "#field_id-12";
      var postt = "#field_id-13";
      var points = "#field_id-6";
      var avatar = "#profile-advanced-right .inner div img";
      var msg1 = 'Congratulations to ';
      var msg2  = ' our member of ';
    var msg3  = '. Joined the first time in this forum ';
    var msg4  = '. He/She celebrates a birthday on ';
    var msg5  = '. He/She has a total of ';
    var msg6  = ' posts. He/She received ';
    var msg7  = ' reputation points. Congratulations to this months member.';
   
      var j = jQuery, info1, info2, info3, info4, info5, info6, info7;
      j('#blah1').load('/u'+user+' #main-content', function() {
        info1 = j(this).find(name).text();            //name
        info7= info1.replace('Πληροφορίες για τον/την ','');
        info2 = j(this).find(joindate+' .field_uneditable').text(); //join date
        info3 = j(this).find(bday+' .field_uneditable').text(); //birthday
        info4 = j(this).find(postt+' .field_uneditable').text(); //points
        info5 = j(this).find(points+' .field_uneditable').text(); //post
        info6 = j(this).find(avatar).attr('src'); //avatar
        j('#nameh strong').text(info7);
        j('.mimp a').attr('href', '/privmsg?mode=post&u='+user);
        j('.mipost a').attr('href', '/spa/'+info7);
          j('#thedate').text(n+ " - " +y);
        j('#motm').text(thetitle);
          j('#tavatar').attr('src', info6);

        j('#pprofile').append(' <a href="/u'+user+'">View Profile</a> ');
          j('#bpart').text(msg1 + info7 + msg2 + n+ " - " +y+ msg3 +info2 + msg4 + info3 + msg5+ info5 + msg6 + info4 + msg7);
      });
})(); 
</script>

Hello Ange,
Can we change the date format to Month - Year etc December - 2014?

Try now :

Code:

<style type="text/css">
#tavatar{width:50px;}
table{background-color:#262E33;}
.mipost, #nameh{display:inline-block;padding-left:10px}
td,tr{border:none}
hr {
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 1px;
width:100%
}
#bpart{background-color:#ccc;}
#pprofile{
    padding: 2px 5px;
background-color:darkgreen;
    border-radius:6px;
color:white;
font-weight:bolder;
float:right;
}
#thedate {
    padding: 2px 5px;
background-color:darkgreen;
    border-radius:6px;
color:white;
font-weight:bolder;
}
#motm{font-weight:bolder;color:gray;}
</style>
<table>
             
    <tbody>
        <tr>
                 
            <td style="width: 20%;" rowspan="2">
                    <img id="tavatar" src="http://2img.net/i/fa/invision/pp-blank-thumb.png" />                                                                         
            </td>
                 
        </tr>
             
        <tr>
                 
            <td>
                     
                <div id="nameh">
                        <strong>name</strong> <span class="mimp"><a href="/privmsg?mode=post&u=46"><img src="http://i.imgur.com/1B61PFG.png" /></a></span><span class="mipost"><a href="spa/test"><img src="http://i.imgur.com/Ex7KhNG.png" /></a></span><br />                                                             
                    <hr />
                         
                    <div id="motm">
                              motm   
                    </div>
                                                                                                   
                    <div id="thedate">
                              8 - 2014     
                    </div>
                                                                                                   
                </div>
                     
            </td>
                 
        </tr>
             
        <tr>
                 
            <td colspan="2">
                     
                <div id="bpart">
                         
                </div><br />     
                <div id="pprofile">
                         
                </div>
                     
            </td>
                 
        </tr>
             
    </tbody>
</table>
                                                                                   
<div id="blah1" style="display:none;">
 
</div>

<script type="text/javascript">
(function() {
      var user = "1";
      var thetitle = "Member Of The Month";

      var name = ".subtitle";
    var d = new Date();
var month = new Array();
month[0] = "January";
month[1] = "February";
month[2] = "March";
month[3] = "April";
month[4] = "May";
month[5] = "June";
month[6] = "July";
month[7] = "August";
month[8] = "September";
month[9] = "October";
month[10] = "November";
month[11] = "December";
var n = month[d.getMonth()];
  var y = d.getFullYear();
      var ddate = n+" "+y;
      var joindate = "#field_id-4";
      var bday = "#field_id-12";
      var postt = "#field_id-13";
      var points = "#field_id-6";
      var avatar = "#profile-advanced-right .inner div img";
      var msg1 = 'Congratulations to ';
      var msg2  = ' our member of ';
    var msg3  = '. Joined the first time in this forum ';
    var msg4  = '. He/She celebrates a birthday on ';
    var msg5  = '. He/She has a total of ';
    var msg6  = ' posts. He/She received ';
    var msg7  = ' reputation points. Congratulations to this months member.';
 
      var j = jQuery, info1, info2, info3, info4, info5, info6, info7;
      j('#blah1').load('/u'+user+' #main-content', function() {
        info1 = j(this).find(name).text();            //name
        info7= info1.replace('Πληροφορίες για τον/την ','');
        info2 = j(this).find(joindate+' .field_uneditable').text(); //join date
        info3 = j(this).find(bday+' .field_uneditable').text(); //birthday
        info4 = j(this).find(postt+' .field_uneditable').text(); //points
        info5 = j(this).find(points+' .field_uneditable').text(); //post
        info6 = j(this).find(avatar).attr('src'); //avatar
        j('#nameh strong').text(info7);
        j('.mimp a').attr('href', '/privmsg?mode=post&u='+user);
        j('.mipost a').attr('href', '/spa/'+info7);
          j('#thedate').text(n+ " - " +y);
        j('#motm').text(thetitle);
          j('#tavatar').attr('src', info6);

        j('#pprofile').append(' <a href="/u'+user+'">View Profile</a> ');
          j('#bpart').text(msg1 + info7 + msg2 + n+ " - " +y+ msg3 +info2 + msg4 + info3 + msg5+ info5 + msg6 + info4 + msg7);
      });
})();
</script>

Now its not displaying the avatar

Hello dear all,
I have adapt and finished the code the problems are solved now.
Thank you all of you

Best Regards,
Black-Shadow.