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 images

View previous topic View next topic Go down

Solved Reputation bars images

Post by J0k3R^ on December 14th 2014, 9:05 am

Im using this tutorial but i want to ask if its possible to make the reputations bars like this:




.
.
.

etc

instead of showing only the reputation u have (only dark green bars i mean).

J0k3R^
Forumember

Male Posts : 742
Reputation : 28
Language : Greek > English > Russian > Spanish
Location : C:\>r00t

http://fmplanet.forumgreek.com

Back to top Go down

Solved Re: Reputation bars images

Post by Ange Tuteur on December 14th 2014, 9:52 am

Hello,

You want it to display blank boxes ?

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Reputation bars images

Post by J0k3R^ on December 14th 2014, 12:02 pm

If someone got rep 1 level it should display 1 box dark green and the others soft green (yea blank)
If someone got rep 2 level it should display 2 boxes dark green and the others soft green
and so on Smile

J0k3R^
Forumember

Male Posts : 742
Reputation : 28
Language : Greek > English > Russian > Spanish
Location : C:\>r00t

http://fmplanet.forumgreek.com

Back to top Go down

Solved Re: Reputation bars images

Post by Ange Tuteur on December 14th 2014, 9:13 pm

Try this :
Code:
$(document).ready(function() {
 
 var version = 'punbb';
 
 var settings = {
  repName : 'Reputation',
  repImage1 : 'http://illiweb.com/itest/ranks/stars/stars9.gif',
  repImage2 : 'http://illiweb.com/itest/ranks/stars/stars16.gif',
  repImage3 : 'http://illiweb.com/itest/ranks/stars/stars2.gif',
  repImage4 : 'http://illiweb.com/itest/ranks/stars/stars3.gif',
  repImage5 : 'http://illiweb.com/itest/ranks/stars/stars4.gif',
  repImage6 : 'http://illiweb.com/itest/ranks/stars/stars5.gif',
  repImage7 : 'http://illiweb.com/itest/ranks/stars/stars17.gif',
  repImage8 : 'http://illiweb.com/itest/ranks/stars/stars6.gif'
  };
 
 var repLv = {
  lv1 : 1,
  lv2 : 2,
  lv3 : 3,
  lv4 : 4,
  lv5 : 5,
  lv6 : 6,
  lv7 : 7,
  lv8 : 8
  };
 
  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').html('<img id="rLv" src="'+settings.repImage1+'"/>'); var next = rep + '/' + repLv.lv2 }
  if (rep >= repLv.lv2) { $(this).find('#repu').html('<img id="rLv" src="'+settings.repImage2+'"/>'); var next = rep + '/' + repLv.lv3 }
  if (rep >= repLv.lv3) { $(this).find('#repu').html('<img id="rLv" src="'+settings.repImage3+'"/>'); var next = rep + '/' + repLv.lv4 }
  if (rep >= repLv.lv4) { $(this).find('#repu').html('<img id="rLv" src="'+settings.repImage4+'"/>'); var next = rep + '/' + repLv.lv5 }
  if (rep >= repLv.lv5) { $(this).find('#repu').html('<img id="rLv" src="'+settings.repImage5+'"/>'); var next = rep + '/' + repLv.lv6 }
  if (rep >= repLv.lv6) { $(this).find('#repu').html('<img id="rLv" src="'+settings.repImage6+'"/>'); var next = rep + '/' + repLv.lv7 }
  if (rep >= repLv.lv7) { $(this).find('#repu').html('<img id="rLv" src="'+settings.repImage7+'"/>'); var next = rep + '/' + repLv.lv8 }
  if (rep >= repLv.lv8) { $(this).find('#repu').html('<img id="rLv" src="'+settings.repImage8+'"/>'); var next = 'MAX' }
  $(this).find('#repu').attr('title','Next : (' + next + ')');
  });
  }
});

It's the same deal, however, it will only use images now. Just replace these images with the ones you want :
Code:
repImage1 : 'http://illiweb.com/itest/ranks/stars/stars9.gif',
  repImage2 : 'http://illiweb.com/itest/ranks/stars/stars16.gif',
  repImage3 : 'http://illiweb.com/itest/ranks/stars/stars2.gif',
  repImage4 : 'http://illiweb.com/itest/ranks/stars/stars3.gif',
  repImage5 : 'http://illiweb.com/itest/ranks/stars/stars4.gif',
  repImage6 : 'http://illiweb.com/itest/ranks/stars/stars5.gif',
  repImage7 : 'http://illiweb.com/itest/ranks/stars/stars17.gif',
  repImage8 : 'http://illiweb.com/itest/ranks/stars/stars6.gif'

repImage1 is for lv1, repImage2 is for lv2, and so on..

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Reputation bars images

Post by J0k3R^ on December 16th 2014, 6:27 pm

thank u Smile
solved

J0k3R^
Forumember

Male Posts : 742
Reputation : 28
Language : Greek > English > Russian > Spanish
Location : C:\>r00t

http://fmplanet.forumgreek.com

Back to top Go down

Solved Re: Reputation bars images

Post by Ange Tuteur on December 17th 2014, 12:21 am

You're welcome ^^

Topic archived

Ange Tuteur
Forumaster

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

http://fmdesign.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