javscript based reputation bar ?

[rzr]

I was thinking about a reputation bar lately and i was about to hire someone to create a plugin for it when i realized i can do it with JavaScript.

The main idea is to keep the current reputation template ( reputation: X ) intact and use jquery to replace it with a progress bar. The reputaion value being the width of the dark green part (in %)

This will ensure that the reputation is shown with javscript disabled (or if jquery is not loaded)

But it won't look good for users with reputation over 100. Any ideas to overcome that?

http://i.imgur.com/2rb9A.png

What are your thoughts about it?

[Yaldaram]

You may add a check to set max. value to 100.

[Eric]

Mike did this for Dark Series.

Not sure exactly how, though. Cba to look atm. xD

[rzr]

I see normal reputation style in Dark series :\

[Scois0n]

I was thinking about a reputation bar lately and i was about to hire someone to create a plugin for it when i realized i can do it with JavaScript.

The main idea is to keep the current reputation template ( reputation: X ) intact and use jquery to replace it with a progress bar. The reputaion value being the width of the dark green part (in %)

This will ensure that the reputation is shown with javscript disabled (or if jquery is not loaded)

But it won't look good for users with reputation over 100. Any ideas to overcome that?

http://i.imgur.com/2rb9A.png

What are your thoughts about it?

Don't know enough jQuery to help, but that's a cool idea and it looks nice

[Eric]

Hm, must not be an updated version on the style demo, here's the most recent version though:

http://i.minus.com/iblL3S4acv0t7y.png

[AiedailEclipsed]

Hm, must not be an updated version on the style demo, here's the most recent version though:

http://i.minus.com/iblL3S4acv0t7y.png

Okay, call me crazy but I'm like 99.9% sure that is the warning bar (as in displays the amount you've been warned).

[Eric]

Oh, lol, you're right. x.x Would explain why it isn't on the demo board! My bad, this would be cool then. Could probably do it the same way as well.

[AiedailEclipsed]

Well, theoretically it might be possible but as Yaldaram said you would have to cap the reputation value so that you can get a percentage of the bar to fill. There are few problems with this. 1) Tiny amount of reputation might just make board users unhappy. 2) Large amount of reputation would be ridiculous to graphically represent (imagine one point out of a thousand).

Now, if you went with the first option and simply limited the bar to 100 points, that's a different story. Maybe in the bar itself display a sort of tooltip on hover to show the full point value?

[Eric]

Nah, should be easy enough to cap and edit. Something like:

var cap = 100;
if (rep >== cap) {
$(".reputation").css({width: "100%"});
} 
else {
$(".reputation").css({width: rep + "%"});
}

Dunno if that would work exactly, but it should. Just get the current rep number with .text().

But yeah, a tooltip saying the exact number, or saying it inside the bar would be a good addition.



Or you could use some sort of algorithm to calculate it, but imo cap seems like the best way. Alternatively you could do like, level up images so that users could level up their rep.