The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

progress bar custom bb code

4 posters

Go down

Solved progress bar custom bb code

Post by megamein Sat Jun 17 2023, 00:50

how can I add this progress bar as a custom bb code for my forum?

Code:
<div class="dollartimes-pb" style="font-family: helvatica; width: 300px; box-sizing: border-box; clear:both;">
  <div class="dollartimes-pb-title" style="font-size:16px; overflow: hidden;">project progress at {text}%</div>
  <div class="dollartimes-pb-frame" title="{text}% / {text}% towards goal" style="border-radius: 5px; background-color: #ffffff;padding: 0px;border: 1px solid #000; height: 30px; margin: 2px 0 1px;">
    <div class="dollartimes-pb-fill" style="width:{text}%; height: 100%; margin-top: 0px; background: repeating-linear-gradient(-45deg, rgba(74,134,232,1), rgba(74,134,232,1) 8px, rgba(74,134,232,0.8) 8px, rgba(74,134,232,0.8) 16px);">&nbsp;</div>
  </div>
  <div>
    <span class="dollartimes-pb-caption" style="float: left; font-size: 12px;">0%</span>
    <span class="dollartimes-pb-caption" style="float: right; font-size: 12px;">100%</span>
  </div>
  <div style="clear: both;"></div>
  <div style="margin: 2px 0 0 0; text-align: right;">
  </div>
</div>

for example: [progress]95[/progress] would look like this:

progress bar custom bb code Untitled


Last edited by megamein on Sat Jun 17 2023, 21:47; edited 1 time in total
avatar
megamein
Forumember

Posts : 74
Reputation : 3
Language : english

Back to top Go down

Solved Re: progress bar custom bb code

Post by Razor12345 Sat Jun 17 2023, 09:17

Good afternoon!

Please specify the forum version and the link to the forum.
Earlier you posted a link to AwesomeBB forum. In your profile, you specified phpbb3 as version of forum.


progress bar custom bb code Screen51
Razor12345
Razor12345
Support Moderator
Support Moderator

Male Posts : 1548
Reputation : 266
Language : Ukr, Rus, Eng
Location : Ukraine

skouliki and TonnyKamper like this post

Back to top Go down

Solved Re: progress bar custom bb code

Post by megamein Sat Jun 17 2023, 14:32

Razor12345 wrote:Good afternoon!

Please specify the forum version and the link to the forum.
Earlier you posted a link to AwesomeBB forum. In your profile, you specified phpbb3 as version of forum.
correct, the forum is AwesomeBB: https://www.yotamarker.com/
avatar
megamein
Forumember

Posts : 74
Reputation : 3
Language : english

Back to top Go down

Solved Re: progress bar custom bb code

Post by skouliki Sat Jun 17 2023, 14:40

Please @megamein inform your profile information also
skouliki
skouliki
Manager
Manager

Female Posts : 15247
Reputation : 1703
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

TonnyKamper likes this post

Back to top Go down

Solved Re: progress bar custom bb code

Post by megamein Sat Jun 17 2023, 14:43

skouliki wrote:Please @megamein inform your profile information also
OK, please tell me how to do that
avatar
megamein
Forumember

Posts : 74
Reputation : 3
Language : english

Back to top Go down

Solved Re: progress bar custom bb code

Post by skouliki Sat Jun 17 2023, 15:06

By going to your profile tab information and add the correct information
skouliki
skouliki
Manager
Manager

Female Posts : 15247
Reputation : 1703
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Solved Re: progress bar custom bb code

Post by Niko Sat Jun 17 2023, 19:07

Coucou @megamein

Before:
progress bar custom bb code Scree151

After:
progress bar custom bb code Scree150

Simply go to ACP > Modules > HTML & Javascript > Javascript codes management, create a new code in all pages and use this content Wink

Code:
$(function() {

$('.post-content').each(function(){
    var str = $(this).text();
    var percentage = str.substring(
        str.indexOf("[progress]")+10,
        str.lastIndexOf("[/progress]")
    );

    var buttonStart = $(this).html().replace(/\[progress\]/,'<div class="dollartimes-pb" style="font-family: helvatica; width: 300px; box-sizing: border-box; clear:both;"> <div class="dollartimes-pb-title" style="font-size:16px; overflow: hidden;">project progress at '+percentage+'%</div> <div class="dollartimes-pb-frame" title="'+percentage+'% / '+percentage+'% towards goal" style="border-radius: 5px; background-color: #ffffff;padding: 0px;border: 1px solid #000; height: 30px; margin: 2px 0 1px;"> <div class="dollartimes-pb-fill" style="width:'+percentage+'%; height: 100%; margin-top: 0px; background: repeating-linear-gradient(-45deg, rgba(74,134,232,1), rgba(74,134,232,1) 8px, rgba(74,134,232,0.8) 8px, rgba(74,134,232,0.8) 16px);">&nbsp;</div> </div> <div> <span class="dollartimes-pb-caption" style="float: left; font-size: 12px;">0%</span> <span class="dollartimes-pb-caption" style="float: right; font-size: 12px;">100%</span> </div> <div style="clear: both;"></div> <div style="margin: 2px 0 0 0; text-align: right;"> </div> </div>');
        $(this).html(buttonStart);

        var buttonEnd = $(this).html().replace(percentage+'[/progress]','');
        $(this).html(buttonEnd);

});
});
Niko
Niko
Helper
Helper

Male Posts : 3130
Reputation : 246
Language : English, Italian, French
Location : Italy

https://www.fmcodes.net/

TonnyKamper likes this post

Back to top Go down

Solved Re: progress bar custom bb code

Post by Razor12345 Sat Jun 17 2023, 22:18

Problem solved & topic archived.
Please read our forum rules: ESF General Rules


progress bar custom bb code Screen51
Razor12345
Razor12345
Support Moderator
Support Moderator

Male Posts : 1548
Reputation : 266
Language : Ukr, Rus, Eng
Location : Ukraine

Back to top Go down

Back to top

- Similar topics

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