The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Reputation Bars

View previous topic View next topic Go down

Solved Reputation Bars

Post by Swamp Fox on March 22nd 2014, 4:48 pm

Hello, I just made http://swampfox.forumotion.com/ for a bunch of my friends to hang out in. We were wondering if there is a way to create Reputation Bars? 

Reputation Bars are bars that get bigger based on how much Reputation points you have until it maxes it.
We like it because it is a cool way to look at people's rep.


Swamp Fox
New Member

Posts : 14
Reputation : 1
Language : English

http://swampfox.forumotion.com/

Back to top Go down

Solved Re: Reputation Bars

Post by Pizza Boi on March 22nd 2014, 5:05 pm


Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Reputation Bars

Post by Swamp Fox on March 22nd 2014, 5:14 pm

So it's not possible?

Swamp Fox
New Member

Posts : 14
Reputation : 1
Language : English

http://swampfox.forumotion.com/

Back to top Go down

Solved Re: Reputation Bars

Post by Pizza Boi on March 22nd 2014, 5:16 pm

Hi Very Happy

Yes, it is not possible.

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Reputation Bars

Post by Swamp Fox on March 22nd 2014, 5:43 pm

That's too bad

Swamp Fox
New Member

Posts : 14
Reputation : 1
Language : English

http://swampfox.forumotion.com/

Back to top Go down

Solved Re: Reputation Bars

Post by Pizza Boi on March 22nd 2014, 6:03 pm

Hi Very Happy

Yes, it is. Hopefully, someone can think for this Smile .

Actually, why don't you suggest it?

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Reputation Bars

Post by Ange Tuteur on March 22nd 2014, 9:00 pm

Hello Swamp Fox,

This is absolutely possible, it just takes a bit of javascript. Wink

Administration panel > modules > javascript codes management > create a new script

Title : Rep bar
Placement : In the topics
Paste the code below and save :
Code:
$(document).ready(function() {
    
    repLv = {
       lv1 : 1,
       lv2 : 2,
       lv3 : 3,
       lv4 : 4,
       lv5 : 5,
       lv6 : 6,
       lv7 : 7,
       lv8 : 8
    };
    
    $('td .postdetails.poster-profile').each(function() {
       var str = $(this).text().replace(/.*Reputation:  (\d+).*/,'$1');
       var rep = Number(str);
       $(this).parent().find('.name').next().after('<div id="repu" title="'+str+' Reputation">');
       if (rep >= repLv["lv1"]) { $(this).parent().find('#repu').append('<span class="repuBlock">') }
       if (rep >= repLv["lv2"]) { $(this).parent().find('#repu').append('<span class="repuBlock">') }
       if (rep >= repLv["lv3"]) { $(this).parent().find('#repu').append('<span class="repuBlock">') }
       if (rep >= repLv["lv4"]) { $(this).parent().find('#repu').append('<span class="repuBlock">') }
       if (rep >= repLv["lv5"]) { $(this).parent().find('#repu').append('<span class="repuBlock">') }
       if (rep >= repLv["lv6"]) { $(this).parent().find('#repu').append('<span class="repuBlock">') }
       if (rep >= repLv["lv7"]) { $(this).parent().find('#repu').append('<span class="repuBlock">') }
       if (rep >= repLv["lv8"]) { $(this).parent().find('#repu').append('<span class="repuBlock">') }
    });
});

For the style :
Display > colors > CSS stylesheet
Paste this in the sheet and submit :
Code:
#repu {
    margin:2px 0;
    width:80px;
}
.repuBlock {
    height:10px;
    width:5px;
    background:#0A0;
    border:1px solid #080;
    border-radius:2px;
    box-shadow:0 3px 3px #0C0 inset;
    display:inline-block;
}

To change how many bars display depending on your rep count you must modify this piece in the script :
Code:
   repLv = {
       lv1 : 1,
       lv2 : 2,
       lv3 : 3,
       lv4 : 4,
       lv5 : 5,
       lv6 : 6,
       lv7 : 7,
       lv8 : 8
    };

1, 2, 3, 4, ect.. Corresponds to the amount of rep it takes to achieve a new level.

result :

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Reputation Bars

Post by Pizza Boi on March 22nd 2014, 9:03 pm

@Ange Tuteur wrote:Hello Swamp Fox,

This is absolutely possible, it just takes a bit of javascript. Wink

Administration panel > modules > javascript codes management > create a new script

Title : Rep bar
Placement : In the topics
Paste the code below and save :
Code:
$(document).ready(function() {
    
    repLv = {
       lv1 : 1,
       lv2 : 2,
       lv3 : 3,
       lv4 : 4,
       lv5 : 5,
       lv6 : 6,
       lv7 : 7,
       lv8 : 8
    };
    
    $('td .postdetails.poster-profile').each(function() {
       var str = $(this).text().replace(/.*Reputation:  (\d+).*/,'$1');
       var rep = Number(str);
       $(this).parent().find('.name').next().after('<div id="repu" title="'+str+' Reputation">');
       if (rep >= repLv["lv1"]) { $(this).parent().find('#repu').append('<span class="repuBlock">') }
       if (rep >= repLv["lv2"]) { $(this).parent().find('#repu').append('<span class="repuBlock">') }
       if (rep >= repLv["lv3"]) { $(this).parent().find('#repu').append('<span class="repuBlock">') }
       if (rep >= repLv["lv4"]) { $(this).parent().find('#repu').append('<span class="repuBlock">') }
       if (rep >= repLv["lv5"]) { $(this).parent().find('#repu').append('<span class="repuBlock">') }
       if (rep >= repLv["lv6"]) { $(this).parent().find('#repu').append('<span class="repuBlock">') }
       if (rep >= repLv["lv7"]) { $(this).parent().find('#repu').append('<span class="repuBlock">') }
       if (rep >= repLv["lv8"]) { $(this).parent().find('#repu').append('<span class="repuBlock">') }
    });
});

For the style :
Display > colors > CSS stylesheet
Paste this in the sheet and submit :
Code:
#repu {
    margin:2px 0;
    width:80px;
}
.repuBlock {
    height:10px;
    width:5px;
    background:#0A0;
    border:1px solid #080;
    border-radius:2px;
    box-shadow:0 3px 3px #0C0 inset;
    display:inline-block;
}

To change how many bars display depending on your rep count you must modify this piece in the script :
Code:
   repLv = {
       lv1 : 1,
       lv2 : 2,
       lv3 : 3,
       lv4 : 4,
       lv5 : 5,
       lv6 : 6,
       lv7 : 7,
       lv8 : 8
    };

1, 2, 3, 4, ect.. Corresponds to the amount of rep it takes to achieve a new level.

result :

Hi Very Happy

Can you make a tutorial for all versions please o.o ...?

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Reputation Bars

Post by Swamp Fox on March 24th 2014, 11:16 pm

Thank you for that Very Happy
Unforunitly it didn't work..Sad

Does it have to do with the fact that I have phpbb2?

Swamp Fox
New Member

Posts : 14
Reputation : 1
Language : English

http://swampfox.forumotion.com/

Back to top Go down

Solved Re: Reputation Bars

Post by Ange Tuteur on March 24th 2014, 11:33 pm

Hmm.. no, it should work.

Try this version instead :
Code:
   $(document).ready(function() {
        
        var version = 'phpbb2';
        
        var repName = 'Reputation';
        var repLv = {
           lv1 : 1,
           lv2 : 2,
           lv3 : 3,
           lv4 : 4,
           lv5 : 5,
           lv6 : 6,
           lv7 : 7,
           lv8 : 8
        };
        
        if (version.toLowerCase() == 'phpbb3' || version.toLowerCase() == 'invision') {
           $('.postprofile').each(function() {
              if (version.toLowerCase() == 'phpbb3') {
                  var reg = new RegExp('.*'+repName+':  (\\d+).*');
                  var str = $(this).text().replace(reg,'$1')
             }
              if (version.toLowerCase() == 'invision') {
                 var reg = new RegExp('.*'+repName+': (\\d+).*');
                  var str = $(this).text().replace(reg,'$1')
             }
              var rep = Number(str);
              $(this).find('dt').append('<div id="repu">');
              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">') }
              $(this).find('#repu').attr('title','Reputation level '+$(this).find('.repuBlock').length);
           });
        }
        else if (version.toLowerCase() == 'punbb') {
           $('.user').each(function() {
              var reg = new RegExp('.*'+repName+': (\\d+).*');
              var str = $(this).text().replace(reg,'$1');
              var rep = Number(str);
              $(this).find('.user-ident').prepend('<div id="repu" title="'+str+' Reputation">');
              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">') }
              $(this).find('#repu').attr('title','Reputation level '+$(this).find('.repuBlock').length);
           });
        }
        else if (version.toLowerCase() == 'phpbb2') {
           $('td .postdetails.poster-profile').each(function() {
              var reg = new RegExp('.*'+repName+':  (\\d+).*');
              var str = $(this).text().replace(reg,'$1');
              var rep = Number(str);
              $(this).parent().find('.name').next().after('<div id="repu" title="'+str+' Reputation">');
              if (rep >= repLv["lv1"]) { $(this).parent().find('#repu').append('<span class="repuBlock">') }
              if (rep >= repLv["lv2"]) { $(this).parent().find('#repu').append('<span class="repuBlock">') }
              if (rep >= repLv["lv3"]) { $(this).parent().find('#repu').append('<span class="repuBlock">') }
              if (rep >= repLv["lv4"]) { $(this).parent().find('#repu').append('<span class="repuBlock">') }
              if (rep >= repLv["lv5"]) { $(this).parent().find('#repu').append('<span class="repuBlock">') }
              if (rep >= repLv["lv6"]) { $(this).parent().find('#repu').append('<span class="repuBlock">') }
              if (rep >= repLv["lv7"]) { $(this).parent().find('#repu').append('<span class="repuBlock">') }
              if (rep >= repLv["lv8"]) { $(this).parent().find('#repu').append('<span class="repuBlock">') }
              $(this).parent().find('#repu').attr('title','Reputation level '+$(this).parent().find('.repuBlock').length);
           });
        }
    });

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Reputation Bars

Post by Michael_vx on March 24th 2014, 11:41 pm

Unforunitly it didn't work with me too
i wander if i miss something or i should do something or i don`t know
i`m not smart i guess 0% smart that`s me Very Happy

Michael_vx
Forumember

Male Posts : 655
Reputation : 29
Language : Arabic and some English
Location : Egypt

Back to top Go down

Solved Re: Reputation Bars

Post by Swamp Fox on March 25th 2014, 2:02 am

I am probably doing something wrong since I am a noob.

Hey Ange do you mind making an account on swampfox.forumotion.com
Then I can make you an admin in which you can help me?

I would really appreciate it. 

Thanks for this,
Swamp Fox

Swamp Fox
New Member

Posts : 14
Reputation : 1
Language : English

http://swampfox.forumotion.com/

Back to top Go down

Solved Re: Reputation Bars

Post by Michael_vx on March 25th 2014, 2:05 am

@Swamp Fox wrote:I am probably doing something wrong since I am a noob.

Hey Ange do you mind making an account on swampfox.forumotion.com
Then I can make you an admin in which you can help me?

I would really appreciate it. 

Thanks for this,
Swamp Fox
i`m not sure if i can do it or not
i wil make account any way

Michael_vx
Forumember

Male Posts : 655
Reputation : 29
Language : Arabic and some English
Location : Egypt

Back to top Go down

Solved Re: Reputation Bars

Post by Ange Tuteur on March 25th 2014, 3:30 am

Swamp Fox,

Have you enabled javascript management ?
Administration panel > modules > javascript codes management

Tick 'yes' for 'Enable Javascript code management' and save.


Michael_vx,

For the multi-version script, after installing the CSS, you must modify this part to the version of your forum :
Code:
       var version = 'phpbb2';

The four versions it is compatible with are :
phpbb2, phpbb3, punbb, and invision

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Reputation Bars

Post by Michael_vx on March 25th 2014, 3:49 am

version of my forum is phpbb2
but still same i`m Unlucky or there something i should know about it better

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

should it be image urls here or just like that or what i`m guessing that`s could be why its not working
i think i have bad English spelling i`m just Arabic man live in Egypt Very Happy

Michael_vx
Forumember

Male Posts : 655
Reputation : 29
Language : Arabic and some English
Location : Egypt

Back to top Go down

Solved Re: Reputation Bars

Post by Ange Tuteur on March 25th 2014, 3:55 am

Here, I'll quote the variables that should be modifed :
@Ange Tuteur wrote:To customize and make sure this script works for you, there are three variables you must modify in the script :
Code:
   var version = 'phpbb3';
    
    var repName = 'Reputation';
    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.

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.

repLv : 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.

You will most likely need to modify the repName variable. Reputation => Your language

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Reputation Bars

Post by Michael_vx on March 25th 2014, 4:18 am

nuh i give up about that Very Happy
my small head wont understand i guess
i hope its works with others

Michael_vx
Forumember

Male Posts : 655
Reputation : 29
Language : Arabic and some English
Location : Egypt

Back to top Go down

Solved Re: Reputation Bars

Post by Swamp Fox on March 25th 2014, 8:03 pm

Wow now it worked!

Thanks so much  cheers

Swamp Fox
New Member

Posts : 14
Reputation : 1
Language : English

http://swampfox.forumotion.com/

Back to top Go down

Solved Re: Reputation Bars

Post by SLGray on March 25th 2014, 9:24 pm

Problem solved & topic archived.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35606
Reputation : 2372
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


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