Recent Status Update Widget like IPB

First topic message reminder :

Hello! Well we have been pulling off some things that have been said can't be done, so i would like to see one more time can a status update widget be made with avatar and latest status updates from members like IPB forum sets have?

@JScript What is your thoughts on this Or anyone?

Using LG status updates
punbb
Forum link: TPSN

Thank you yet again sir!

Regards
FrOsTyXi

ok great thank you for all the time and work! I'll go play with it thank you again!

Hello,
Can I have the code please?

@_Twisted_Mods_ Yes please post the code. This is your baby and you should be the one to post it!

Thank you and Kind Regards!

this is the script for when you click the update button .. it grabs a list of users # from the post and removes the last one adds the user# of the user who clicked the button .. this is only for punbb because  the elements are different in other versions

/t3-status-users =  the post page that it gets used id's from
/post?p=4 =  the post # for it to edit the post.. u can highlight edit post to get the post #

Code:


jQuery(function(){
jQuery('.status-button').click(function(){
 jQuery.get('/t3-status-users', function (data) {
            var groupz = {
                group1z: jQuery('.entry-content', data).text(),
};
    ff = groupz.group1z;
    gg = ff.split(' ');
    mm="";
   for(var i = 0; i < 4; i++){
      
       var hh = gg[i];
       mm = mm  + " "+ hh;

    }

          jQuery.post('/post?p=4&mode=editpost', {
  subject: 'Status Updates',
         message: _userdata.user_id+mm,
         post: 1
      });
   
 })
 
});
});




this is the code for the recent status update widget .. it grabs the list of user # from the post goes to each ones profile and gets their name,avatar, and status and attaches it to its holder

/t3-status-users =  page it grabs the user ids from
#field_id2 = the profile field it grabs the status from

Code:


<style>
/*-----ststusupdatewid--by-twisted------*/
.statsbox #statavatar {

    display: inline-block;
    width: 100%;
}
.statsbox {

    padding: 5px;
    margin-bottom: 2px;
    margin-top: 2px;
    border-radius: 5px;
    border: 1px solid #000;
  
}
.statsbox #statavatar img {
    width: 30px;
    float: left;
}
.statsbox .h3 {
  background-color:white;
    border-radius: 5px;
    padding: 2px;
    border: 1px solid #000;
    display: inherit;
  width:110px;
  text-align: center;
}
/*-------------------------------------*/
</style>
<div id="supdate_widget">
</div><script>

jQuery(function(){
 jQuery('#supdate_widget').empty();
 jQuery.get('/t3-status-users', function (data) {
    tpfieldid = '#field_id2:eq(0)';
            var group = {
                group1: jQuery('.entry-content', data).text(),
};
    gg = "";
    ff = group.group1;
    gg = ff.split(' ');


           nurl1 = '/u'+gg[0];
       nurl2 = '/u'+gg[1];
       nurl3 = '/u'+gg[2];
       nurl4 = '/u'+gg[3];
       nurl5 = '/u'+gg[4];
         jQuery('#supdate_widget').append(' <div id="statusbox1" class="statsbox"><div id="statavatar"></div><div id="tstatus"></div></div> ');
         jQuery('#supdate_widget').append(' <div id="statusbox2" class="statsbox"><div id="statavatar"></div><div id="tstatus"></div></div> ');
         jQuery('#supdate_widget').append(' <div id="statusbox3" class="statsbox"><div id="statavatar"></div><div id="tstatus"></div></div> ');
          jQuery('#supdate_widget').append(' <div id="statusbox4" class="statsbox"><div id="statavatar"></div><div id="tstatus"></div></div> ');
          jQuery('#supdate_widget').append(' <div id="statusbox5" class="statsbox"><div id="statavatar"></div><div id="tstatus"></div></div> ');
           
         
 jQuery.get(nurl1, function (data) {
            var prof1 = {
                     name1: jQuery('#profile-advanced-right .h3:eq(0)', data).parent().html().replace(/\(online\)/g,''),
                     avatar1: jQuery('#profile-advanced-right img:eq(0)', data).attr('src'),
                     status1: jQuery(tpfieldid, data).text(),
};
jQuery('#supdate_widget #statusbox1 #statavatar').prepend('<img src="'+prof1.avatar1+'">');
jQuery('#supdate_widget #statusbox1 #statavatar').append(prof1.name1);
jQuery('#supdate_widget #statusbox1 #tstatus').append(prof1.status1) ;
});
   
   
 jQuery.get(nurl2, function (data) {
            var prof = {
                     name: jQuery('#profile-advanced-right .h3:eq(0)', data).parent().html().replace(/\(online\)/g,''),
                     avatar: jQuery('#profile-advanced-right img:eq(0)', data).attr('src'),
                     status: jQuery(tpfieldid, data).text(),
};
jQuery('#supdate_widget #statusbox2 #statavatar').prepend('<img src="'+prof.avatar+'">');
jQuery('#supdate_widget #statusbox2 #statavatar').append(prof.name);
jQuery('#supdate_widget #statusbox2 #tstatus').append(prof.status) ;
});

   
     jQuery.get(nurl3, function (data) {
            var prof = {
                     name: jQuery('#profile-advanced-right .h3:eq(0)', data).parent().html().replace(/\(online\)/g,''),
                     avatar: jQuery('#profile-advanced-right img:eq(0)', data).attr('src'),
                     status: jQuery(tpfieldid, data).text(),
}
jQuery('#supdate_widget #statusbox3 #statavatar').prepend('<img src="'+prof.avatar+'">');
jQuery('#supdate_widget #statusbox3 #statavatar').append(prof.name);
jQuery('#supdate_widget #statusbox3 #tstatus').append(prof.status) ;
});
   
     jQuery.get(nurl4, function (data) {
            var prof = {
                     name: jQuery('#profile-advanced-right .h3:eq(0)', data).parent().html().replace(/\(online\)/g,''),
                     avatar: jQuery('#profile-advanced-right img:eq(0)', data).attr('src'),
                     status: jQuery(tpfieldid, data).text(),
}
jQuery('#supdate_widget #statusbox4 #statavatar').prepend('<img src="'+prof.avatar+'">');
jQuery('#supdate_widget #statusbox4 #statavatar').append(prof.name);
jQuery('#supdate_widget #statusbox4 #tstatus').append(prof.status) ;
});
   
     jQuery.get(nurl5, function (data) {
            var prof = {
                     name: jQuery('#profile-advanced-right .h3:eq(0)', data).parent().html().replace(/\(online\)/g,''),
                     avatar: jQuery('#profile-advanced-right img:eq(0)', data).attr('src'),
                     status: jQuery(tpfieldid, data).text(),
}
jQuery('#supdate_widget #statusbox5 #statavatar').prepend('<img src="'+prof.avatar+'">');
jQuery('#supdate_widget #statusbox5 #statavatar').append(prof.name);
jQuery('#supdate_widget #statusbox5 #tstatus').append(prof.status) ;
});
   
 
 });
 });



</script>


@_Twisted_Mods_ I will set you back to admin so you can look this over

_Twisted_Mods_ wrote:this is the script for when you click the update button .. it grabs a list of users # from the post and removes the last one adds the user# of the user who clicked the button .. this is only for punbb because  the elements are different in other versions

/t3-status-users =  the post page that it gets used id's from
/post?p=4 =  the post # for it to edit the post.. u can highlight edit post to get the post #

Code:


jQuery(function(){
jQuery('.status-button').click(function(){
 jQuery.get('/t3-status-users', function (data) {
            var groupz = {
                group1z: jQuery('.entry-content', data).text(),
};
    ff = groupz.group1z;
    gg = ff.split(' ');
    mm="";
   for(var i = 0; i < 4; i++){
      
       var hh = gg[i];
       mm = mm  + " "+ hh;

    }

          jQuery.post('/post?p=4&mode=editpost', {
  subject: 'Status Updates',
         message: _userdata.user_id+mm,
         post: 1
      });
   
 })
 
});
});




this is the code for the recent status update widget .. it grabs the list of user # from the post goes to each ones profile and gets their name,avatar, and status and attaches it to its holder

/t3-status-users =  page it grabs the user ids from
#field_id2 = the profile field it grabs the status from

Code:


<style>
/*-----ststusupdatewid--by-twisted------*/
.statsbox #statavatar {

    display: inline-block;
    width: 100%;
}
.statsbox {

    padding: 5px;
    margin-bottom: 2px;
    margin-top: 2px;
    border-radius: 5px;
    border: 1px solid #000;
  
}
.statsbox #statavatar img {
    width: 30px;
    float: left;
}
.statsbox .h3 {
  background-color:white;
    border-radius: 5px;
    padding: 2px;
    border: 1px solid #000;
    display: inherit;
  width:110px;
  text-align: center;
}
/*-------------------------------------*/
</style>
<div id="supdate_widget">
</div><script>

jQuery(function(){
 jQuery('#supdate_widget').empty();
 jQuery.get('/t3-status-users', function (data) {
    tpfieldid = '#field_id2:eq(0)';
            var group = {
                group1: jQuery('.entry-content', data).text(),
};
    gg = "";
    ff = group.group1;
    gg = ff.split(' ');


           nurl1 = '/u'+gg[0];
       nurl2 = '/u'+gg[1];
       nurl3 = '/u'+gg[2];
       nurl4 = '/u'+gg[3];
       nurl5 = '/u'+gg[4];
         jQuery('#supdate_widget').append(' <div id="statusbox1" class="statsbox"><div id="statavatar"></div><div id="tstatus"></div></div> ');
         jQuery('#supdate_widget').append(' <div id="statusbox2" class="statsbox"><div id="statavatar"></div><div id="tstatus"></div></div> ');
         jQuery('#supdate_widget').append(' <div id="statusbox3" class="statsbox"><div id="statavatar"></div><div id="tstatus"></div></div> ');
          jQuery('#supdate_widget').append(' <div id="statusbox4" class="statsbox"><div id="statavatar"></div><div id="tstatus"></div></div> ');
          jQuery('#supdate_widget').append(' <div id="statusbox5" class="statsbox"><div id="statavatar"></div><div id="tstatus"></div></div> ');
           
         
 jQuery.get(nurl1, function (data) {
            var prof1 = {
                     name1: jQuery('#profile-advanced-right .h3:eq(0)', data).parent().html().replace(/\(online\)/g,''),
                     avatar1: jQuery('#profile-advanced-right img:eq(0)', data).attr('src'),
                     status1: jQuery(tpfieldid, data).text(),
};
jQuery('#supdate_widget #statusbox1 #statavatar').prepend('<img src="'+prof1.avatar1+'">');
jQuery('#supdate_widget #statusbox1 #statavatar').append(prof1.name1);
jQuery('#supdate_widget #statusbox1 #tstatus').append(prof1.status1) ;
});
   
   
 jQuery.get(nurl2, function (data) {
            var prof = {
                     name: jQuery('#profile-advanced-right .h3:eq(0)', data).parent().html().replace(/\(online\)/g,''),
                     avatar: jQuery('#profile-advanced-right img:eq(0)', data).attr('src'),
                     status: jQuery(tpfieldid, data).text(),
};
jQuery('#supdate_widget #statusbox2 #statavatar').prepend('<img src="'+prof.avatar+'">');
jQuery('#supdate_widget #statusbox2 #statavatar').append(prof.name);
jQuery('#supdate_widget #statusbox2 #tstatus').append(prof.status) ;
});

   
     jQuery.get(nurl3, function (data) {
            var prof = {
                     name: jQuery('#profile-advanced-right .h3:eq(0)', data).parent().html().replace(/\(online\)/g,''),
                     avatar: jQuery('#profile-advanced-right img:eq(0)', data).attr('src'),
                     status: jQuery(tpfieldid, data).text(),
}
jQuery('#supdate_widget #statusbox3 #statavatar').prepend('<img src="'+prof.avatar+'">');
jQuery('#supdate_widget #statusbox3 #statavatar').append(prof.name);
jQuery('#supdate_widget #statusbox3 #tstatus').append(prof.status) ;
});
   
     jQuery.get(nurl4, function (data) {
            var prof = {
                     name: jQuery('#profile-advanced-right .h3:eq(0)', data).parent().html().replace(/\(online\)/g,''),
                     avatar: jQuery('#profile-advanced-right img:eq(0)', data).attr('src'),
                     status: jQuery(tpfieldid, data).text(),
}
jQuery('#supdate_widget #statusbox4 #statavatar').prepend('<img src="'+prof.avatar+'">');
jQuery('#supdate_widget #statusbox4 #statavatar').append(prof.name);
jQuery('#supdate_widget #statusbox4 #tstatus').append(prof.status) ;
});
   
     jQuery.get(nurl5, function (data) {
            var prof = {
                     name: jQuery('#profile-advanced-right .h3:eq(0)', data).parent().html().replace(/\(online\)/g,''),
                     avatar: jQuery('#profile-advanced-right img:eq(0)', data).attr('src'),
                     status: jQuery(tpfieldid, data).text(),
}
jQuery('#supdate_widget #statusbox5 #statavatar').prepend('<img src="'+prof.avatar+'">');
jQuery('#supdate_widget #statusbox5 #statavatar').append(prof.name);
jQuery('#supdate_widget #statusbox5 #tstatus').append(prof.status) ;
});
   
 
 });
 });



</script>


Hello all,
@_Twisted_Mods_ can we place all the codes into the widget code?

yup it goes right in a widget

No, I mean if the first javascript can be embeded in the widget code (second code).

the first code goes in the status update widget at the very bottom of the code inside <script></script> tags the second code goes in its own widget

Hmm there is a problem here, I have the status update in a dropdown menu not in a widget. Is there a way to place the javascript in the template?

Update:
I am adding the following code

Code:


<script> jQuery(function(){jQuery('.status-button').click(function(){jQuery.get('/t15831-topic', function (data) { var groupz = {group1z: jQuery('.entry-content', data).text(),}; ff = groupz.group1z; gg = ff.split(' '); mm="";for(var i = 0; i < 4; i++){ var hh = gg[i]; mm = mm  + " "+ hh;} jQuery.post('/post?p=4&mode=editpost', { subject: 'Ενημερώσεις Καταστάσεων Μελών', message: _userdata.user_id+mm, post: 1});})});});</script>


in the template but its not working it colorizes some parts of code in the template.

you can just put it in a javascript instead of the template

I have place it but its not working the tag </script> at the end of the script it isn't green http://prntscr.com/5ntgon

@Black-Shadow I like the status update in the template like ipb if at all possible can you send that to me?

@_Twisted_Mods_ all is working great thank you kindly sir!

it wont light up green because the i < 4 throws a false positive and it thinks its the opening of a tag .. the script will still run the right way its just how forumotion has there stuff setup to detect errors

Is there any way to substitute the javascript operator <?

not that i know of� ... as long as your close tags dont show up red ur pretty much good

try using

i==4 instead of i<4

Now I placed it in javascripts and set it In all the pages and still is not working. The topic must be contains something?

make the topic your using public and give me a link to it

Here is the topic

it runs fine... youu do know that script only does something when you click the update button on the status update widget correct?

I didnt install the widget yet because it isn't grab the status into the topic when I am pressing the button update. I have the status update in the profile dropdown menu http://prntscr.com/5numag

Code:

/post?p=4

did you change that to the post #

think its

Code:

/post?p=20047

_Twisted_Mods_ wrote:

Code:

/post?p=4

did you change that to the post #

think its

Code:

/post?p=20047

Hello @_Twisted_Mods_ I change it to 20047 but it is still not working. It writes to the post other text probably from forum rules.

Update1:
The widget of recent status updates seems working. The widget seems working on firefox but its not working on google chrome.

i really cant help you to much i cant read anything on your forum because its not in English and i dont use chrome but ill try my best ....  what do you mean by it doesn't work in chrome?... like nothing shows up or only some things?

The google chrome doesn't update all the boxes of statuses in the widget and some boxes displayed blank or delayed to update. I am working on firefox too not on chrome but I tried to test it in more browsers. On mozilla the same problem some boxes displayed blank.

edit the post that the updates r posted in and type "1 2 3 4 5" and see if all the boxes fill

I do that and after I tried to update some statuses and now the post contains the characters "4 +-----5 +-----1 1 2" and the boxes are not filled correctly.

post me the script for when you click the update button

Here it is:

Code:

<script>status_box.init('profile_field_13_5')</script>

and this one:

Code:


<script src="http://avacweb.net/status">


no i mean the one that i wrote that u edit for your forum not the widget one just the small script

like this one

Code:

jQuery(function(){jQuery('.status-button').click(function(){jQuery.get('/t15831-topic', function (data) { var groupz = {group1z: jQuery('.entry-content', data).text(),}; ff = groupz.group1z; gg = ff.split(' '); mm="";for(var i = 0; i < 4; i++){ var hh = gg[i]; mm = mm  + " "+ hh;} jQuery.post('/post?p=4&mode=editpost', { subject: 'Ενημερώσεις Καταστάσεων Μελών', message: _userdata.user_id+mm, post: 1});})});});

so i can edit it and u can copy n paste