Recent Tutorials
Who is online?
In total there are 7 users online :: 2 Registered, 0 Hidden and 5 Guests

djblah, SLGray

[ View the whole list ]


Most users ever online was 172 on Fri 19 Feb 2016, 05:17

Reputation Bars

View previous topic View next topic Go down

avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4675
Points : 9689
Reputation : 2331
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Sat 22 Mar 2014, 17:43

Hello,

After a user on the support asked a question about bars for reputation I went to work on writing a draft. It took a bit of time to get everything nearly perfect, and you'll be able to test this for all versions.

Preview :

The bar increases in size depending on the amount of reputation a user has amassed.

To test :
Administration panel > modules > javascript codes management > create a new script

Title : Reputation bars
Placement : In the topics
Paste the code below and save :
Code:
$(document).ready(function() {
   
    var version = 'phpbb3';
   
    var settings = {
      repName : 'Reputation',
      repStyle : 'block',
      repImage : 'http://i57.servimg.com/u/f57/18/21/41/30/star12.png'
    };
   
    var repLv = {
      lv1 : 1,
      lv2 : 2,
      lv3 : 3,
      lv4 : 4,
      lv5 : 5,
      lv6 : 6,
      lv7 : 7,
      lv8 : 8
    };
   
    if (settings.repStyle.toLowerCase() == 'block') { var repBlock = '<span id="rLv" class="repuBlock">' }
    else if (settings.repStyle.toLowerCase() == 'image') { var repBlock = '<img id="rLv" src="'+settings.repImage+'"/>' }
    else { var repBlock = '<span id="rLv" class="repuBlock">' }
    var ver = { phpbb2 : version.toLowerCase() == 'phpbb2', phpbb3 : version.toLowerCase() == 'phpbb3', punbb : version.toLowerCase() == 'punbb', invision : version.toLowerCase() == 'invision' };
    var reg = new RegExp('.*'+settings.repName+':\\s+(\\d+).*'); 
   
    if (ver.phpbb3 || ver.punbb || ver.invision) {
      if (ver.phpbb3 || ver.invision) { var profSel = '.postprofile'; var addRepu = $(this).find('dt').append('<div id="repu">'); }
      else if (ver.punbb) { var profSel = '.user'; var addRepu = $(this).find('.user-ident').prepend('<div id="repu">'); }
      $(profSel).each(function() {
          var rep = Number($(this).text().replace(reg,'$1'));
          addRepu;
          if (rep >= repLv.lv1) { $(this).find('#repu').append(repBlock); var next = rep + '/' + repLv.lv2 }
          if (rep >= repLv.lv2) { $(this).find('#repu').append(repBlock); var next = rep + '/' + repLv.lv3 }
          if (rep >= repLv.lv3) { $(this).find('#repu').append(repBlock); var next = rep + '/' + repLv.lv4 }
          if (rep >= repLv.lv4) { $(this).find('#repu').append(repBlock); var next = rep + '/' + repLv.lv5 }
          if (rep >= repLv.lv5) { $(this).find('#repu').append(repBlock); var next = rep + '/' + repLv.lv6 }
          if (rep >= repLv.lv6) { $(this).find('#repu').append(repBlock); var next = rep + '/' + repLv.lv7 }
          if (rep >= repLv.lv7) { $(this).find('#repu').append(repBlock); var next = rep + '/' + repLv.lv8 }
          if (rep >= repLv.lv8) { $(this).find('#repu').append(repBlock); var next = 'MAX' }
          $(this).find('#repu').attr('title','Reputation level ' + $(this).find('#rLv').length + '\nNext : (' + next + ')');
      });
    }
    else if (ver.phpbb2) {
      $('td .postdetails.poster-profile').each(function() {
          var rep = Number($(this).text().replace(reg,'$1'));
          $(this).parent().find('.name').next().after('<div id="repu">');
          if (rep >= repLv.lv1) { $(this).parent().find('#repu').append(repBlock); var next = rep + '/' + repLv.lv2  }
          if (rep >= repLv.lv2) { $(this).parent().find('#repu').append(repBlock); var next = rep + '/' + repLv.lv3  }
          if (rep >= repLv.lv3) { $(this).parent().find('#repu').append(repBlock); var next = rep + '/' + repLv.lv4  }
          if (rep >= repLv.lv4) { $(this).parent().find('#repu').append(repBlock); var next = rep + '/' + repLv.lv5  }
          if (rep >= repLv.lv5) { $(this).parent().find('#repu').append(repBlock); var next = rep + '/' + repLv.lv6  }
          if (rep >= repLv.lv6) { $(this).parent().find('#repu').append(repBlock); var next = rep + '/' + repLv.lv7  }
          if (rep >= repLv.lv7) { $(this).parent().find('#repu').append(repBlock); var next = rep + '/' + repLv.lv8  }
          if (rep >= repLv.lv8) { $(this).parent().find('#repu').append(repBlock); var next = 'MAX'  }
          $(this).parent().find('#repu').attr('title','Reputation level ' + $(this).parent().find('#rLv').length  + '\nNext : (' + next + ')');
      });
    }
});

So the bars have style you must add this to your stylesheet :
Display > Colors > CSS stylesheet
Code:
#repu { margin:2px 0; }
.repuBlock {
    height:8px;
    width:8px;
    background:#0A0;
    border:1px solid #080;
    border-radius:2px;
    box-shadow:0 3px 3px #0C0 inset;
    display:inline-block;
    margin:0 0.5px;
}

To customize and make sure this script works for you, these are the variables you should modify :
Code:
    var version = 'phpbb3';

    var settings = {
       repName : 'Reputation',
       repStyle : 'image',
       repImage : 'http://i57.servimg.com/u/f57/18/21/41/30/star12.png'
    };    

    var repLv = {
       lv1 : 1,
       lv2 : 2,
       lv3 : 3,
       lv4 : 4,
       lv5 : 5,
       lv6 : 6,
       lv7 : 7,
       lv8 : 8
    };

version : corresponds to the version of your forum, if your version is punbb, write punbb. Only four versions can be used : phpbb2, phpbb3, punbb, and invision.

Settings :

repName : corresponds to the name of your reputation field. So the rep value can be found you must change that name to the exact name of your rep field.

repStyle : is the style of the rep blocks. You can choose to set it as an image or a CSS block. The two values you can use are :
Code:
image

block

For the rep image to show up, you must have a valid image URL in repImage.

repImage : is the image URL you'll use for your reputation blocks.

repLv :

lv1, 2, 3.. : 1, 2, 3, 4, ect.. corresponds to the amount of rep it takes to increase in level. In total there are 8 levels of reputation, the value is when that level is achieved.

If you encounter bugs, problems with the code, or have feedback, feel free write a message.

Thank you and happy testing. Smile


Last edited by Ange Tuteur on Wed 09 Apr 2014, 06:28; edited 4 times in total
avatar
Rhino.Freak

Title :
Lord of the 7 kingdoms and protector of the realm
Gender : Male
Age : 21
Posts : 275
Points : 1818
Reputation : 86
Location : India!
Language : English, Hindi
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://tokyoghoular.foruns.com.pt/

PostRhino.Freak on Sun 23 Mar 2014, 00:55

That is Awesome!! But I have a few questions..:
1. Is it possible to show Profile Field name and Reputation count as well? I mean the bar and the count both are shown,? nevermind im stupid
2. Possible to have more than 8 bars?
3. Possible to have different images / style on each bar?

Sorry for asking so much..lol this is indeed quite awesome I tell you.. so far no bugs in here, will test more..
Thanks for sharing! ^^
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4675
Points : 9689
Reputation : 2331
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Sun 23 Mar 2014, 17:56

Yes, it is possible to have more than 8 bars. You must modify portions of your script depending on what you're using.

You must add to this :
Code:
   var repLv = {
       lv1 : 1,
       lv2 : 2,
       lv3 : 3,
       lv4 : 4,
       lv5 : 5,
       lv6 : 6,
       lv7 : 7,
       lv8 : 8,
       lv9 : 9,
       lv10 : 10
    };

and then find the block of code which corresponds to the version you're using and add to it :
Code:
         if (rep >= repLv["lv1"]) { $(this).find('#repu').append('<span class="repuBlock">') }
          if (rep >= repLv["lv2"]) { $(this).find('#repu').append('<span class="repuBlock">') }
          if (rep >= repLv["lv3"]) { $(this).find('#repu').append('<span class="repuBlock">') }
          if (rep >= repLv["lv4"]) { $(this).find('#repu').append('<span class="repuBlock">') }
          if (rep >= repLv["lv5"]) { $(this).find('#repu').append('<span class="repuBlock">') }
          if (rep >= repLv["lv6"]) { $(this).find('#repu').append('<span class="repuBlock">') }
          if (rep >= repLv["lv7"]) { $(this).find('#repu').append('<span class="repuBlock">') }
          if (rep >= repLv["lv8"]) { $(this).find('#repu').append('<span class="repuBlock">') }
          if (rep >= repLv["lv9"]) { $(this).find('#repu').append('<span class="repuBlock">') }
          if (rep >= repLv["lv10"]) { $(this).find('#repu').append('<span class="repuBlock">') }

To have a different style for each bar you can edit the HTML that is appended to #repu for each level. For example I added a new class :
Code:
         if (rep >= repLv["lv1"]) { $(this).find('#repu').append('<span class="repuBlock r1">') }
          if (rep >= repLv["lv2"]) { $(this).find('#repu').append('<span class="repuBlock r2">') }
          if (rep >= repLv["lv3"]) { $(this).find('#repu').append('<span class="repuBlock r3">') }
          if (rep >= repLv["lv4"]) { $(this).find('#repu').append('<span class="repuBlock r4">') }
          if (rep >= repLv["lv5"]) { $(this).find('#repu').append('<span class="repuBlock r5">') }
          if (rep >= repLv["lv6"]) { $(this).find('#repu').append('<span class="repuBlock r6">') }
          if (rep >= repLv["lv7"]) { $(this).find('#repu').append('<span class="repuBlock r7">') }
          if (rep >= repLv["lv8"]) { $(this).find('#repu').append('<span class="repuBlock r8">') }

So to style them individually I would do :
Code:
.repuBlock.r1 { background:blue }
.repuBlock.r2 { background:gray }
.repuBlock.r3 { background:red }

For an image you would just edit the HTML to add :
Code:
         if (rep >= repLv["lv1"]) { $(this).find('#repu').append('<img class="repuBlock" src="img" />') }

Remember to keep the repuBlock class as it is used to count the users rep level.
avatar
Rhino.Freak

Title :
Lord of the 7 kingdoms and protector of the realm
Gender : Male
Age : 21
Posts : 275
Points : 1818
Reputation : 86
Location : India!
Language : English, Hindi
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://tokyoghoular.foruns.com.pt/

PostRhino.Freak on Mon 24 Mar 2014, 00:22

Alright thanx Very Happy
one last thing, can we name the bar like any other profile field? coz right now its just a bar..
a text "Rep Meter" above it is possible ?
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4675
Points : 9689
Reputation : 2331
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Mon 24 Mar 2014, 01:24

For the bar, find the block of code for your version and modify the HTML that is added :
Code:
$(this).find('dt').append('<div id="repu">');

to :
Code:
$(this).find('dt').append('Rep Level : <div id="repu">');
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4675
Points : 9689
Reputation : 2331
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Tue 25 Mar 2014, 03:52

Hello !

I have updated the script and CSS for the reputation bar. In this update I've cleaned a few things up and added some more settings. You can now choose between CSS blocks, or an image for the reputation bars. You can change the image that displays by modifying the repImage variable.

The default image used is a star. For the updated code and explanation, please see the first post.

Thanks for your feedback and happy testing ! Very Happy
avatar
Rhino.Freak

Title :
Lord of the 7 kingdoms and protector of the realm
Gender : Male
Age : 21
Posts : 275
Points : 1818
Reputation : 86
Location : India!
Language : English, Hindi
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://tokyoghoular.foruns.com.pt/

PostRhino.Freak on Tue 25 Mar 2014, 23:36

awesome !! how to put them inside profilees?
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4675
Points : 9689
Reputation : 2331
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Wed 26 Mar 2014, 09:42

@Rhino.Freak wrote:awesome !! how to put them inside profilees?
Thank you. Smile

When you say inside profiles, you mean the user profile page, no ? (This)
avatar
Rhino.Freak

Title :
Lord of the 7 kingdoms and protector of the realm
Gender : Male
Age : 21
Posts : 275
Points : 1818
Reputation : 86
Location : India!
Language : English, Hindi
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://tokyoghoular.foruns.com.pt/

PostRhino.Freak on Wed 26 Mar 2014, 23:22

Yeah thats what I meant.. I cant see it in profiles
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4675
Points : 9689
Reputation : 2331
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Thu 27 Mar 2014, 07:06

The system is designed for the topics, but it could probably work in the profiles. The only thing is it would have to work on one or two pages, since the reputation value is on the index or stats of the users profile.
avatar
Rhino.Freak

Title :
Lord of the 7 kingdoms and protector of the realm
Gender : Male
Age : 21
Posts : 275
Points : 1818
Reputation : 86
Location : India!
Language : English, Hindi
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://tokyoghoular.foruns.com.pt/

PostRhino.Freak on Sat 29 Mar 2014, 06:30

I see, well that isn't much important really..
however, I have yet another question, Razz Say if we repname=Points, will the bar work for the values in points field too?
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4675
Points : 9689
Reputation : 2331
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Sat 29 Mar 2014, 11:48

Just tested and..Yep it works. Just have to make sure it is displayed in messages. Razz
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4675
Points : 9689
Reputation : 2331
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Mon 31 Mar 2014, 09:37

Hello,

I have made a small update to reduce the size of the script. It used to be 80 lines, it should now be 60. (I got rid of the punbb condition and merged it with the invision and bb3 one)
avatar
Rhino.Freak

Title :
Lord of the 7 kingdoms and protector of the realm
Gender : Male
Age : 21
Posts : 275
Points : 1818
Reputation : 86
Location : India!
Language : English, Hindi
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://tokyoghoular.foruns.com.pt/

PostRhino.Freak on Mon 31 Mar 2014, 23:32

Nice! Very Happy Its really awesome, we can now have points bars as well.. ^^
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4675
Points : 9689
Reputation : 2331
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Wed 02 Apr 2014, 11:49

Yep, it should work with any number field. Wink
avatar
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 44
Posts : 2398
Points : 4613
Reputation : 282
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : ModernBB
Awards :
View all awards
View user profile http://www.fmthemes.forumotion.com https://www.facebook.com/FM-Themes-655055824604957 https://twitter.com/FMThemes https://pinterest.com/FMThemes

PostSLGray on Thu 03 Apr 2014, 21:58

This a great idea. It is similar to the ones on Zetaboards.
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4675
Points : 9689
Reputation : 2331
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Fri 04 Apr 2014, 13:07

Thanks, I never saw the Zetaboards one before. Now I'm curious to see what it looks like...to Zetaboards !!
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4675
Points : 9689
Reputation : 2331
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Wed 09 Apr 2014, 06:44

Hello,

I have made a small update to the code. When hovering over the reputation bar it should now show the amount of rep needed to achieve the next level.


You can find the updated code in the first post.
avatar
Rhino.Freak

Title :
Lord of the 7 kingdoms and protector of the realm
Gender : Male
Age : 21
Posts : 275
Points : 1818
Reputation : 86
Location : India!
Language : English, Hindi
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://tokyoghoular.foruns.com.pt/

PostRhino.Freak on Wed 09 Apr 2014, 08:12

damn you're cool! nice !!
avatar
Beyonder
Member
Title :
Gender : Male
Age : 20
Posts : 18
Points : 1250
Reputation : 6
Location : Beyond Realm
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile http://narutorpguniverse.forumotion.com

PostBeyonder on Fri 18 Apr 2014, 03:37

Any version for PhpBB?
avatar
Rhino.Freak

Title :
Lord of the 7 kingdoms and protector of the realm
Gender : Male
Age : 21
Posts : 275
Points : 1818
Reputation : 86
Location : India!
Language : English, Hindi
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://tokyoghoular.foruns.com.pt/

PostRhino.Freak on Fri 18 Apr 2014, 06:53

Its for all versions.. phpbb2 and phpbb3 both Smile
avatar
Deh
New Member
Title :
Gender : Unspecified
Posts : 1
Points : 1259
Reputation : 1
Language : Engish / Romanian
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile

PostDeh on Wed 04 Jun 2014, 06:48

Awesome , thanks Ange Very Happy .
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4675
Points : 9689
Reputation : 2331
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Fri 06 Jun 2014, 00:18

You're welcome, Deh ! Very Happy
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4675
Points : 9689
Reputation : 2331
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Wed 09 Jul 2014, 04:36

This feature is now available on the Support Forum. Smile
http://help.forumotion.com/t132299-add-a-bar-for-reputation

Topic archived

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

 
Permissions in this forum:
You cannot reply to topics in this forum