Progress Bar in MiniProfile

[nleslie]

Hey all!

This may not be possible, but I figured if there was any place to figure it out - this would be it. 

Our board is for writers, and our users set word count goals then update them on a daily basis throughout the month. I'm looking to see if there's a way for the user to set their goal in a custom field on their profile, and set their current word count in a custom field, then have a progress bar display in their MiniProfile.

Here's a rough mockup I made in Photoshop: s26.postimg.cc/uv8002t0p/Screen_Shot_2013_12_05_at_9_39_29_AM.png

Anything like this exist? Even just a way for them to input the fields, then display a 5,000/10,000 words in the MiniProfile would be a step in the right direction.

Thanks in advance for the input, and sorry if this is just a silly question, I'm still getting my ProBoards bearings!

[Former Member]

Hey there!

So, the 5,000/10,000 type display would be super easypeasy if that's the route you wanna go, no problem!

The bar route... If you picked, like, four to ten images, each one a different amount filled in the bar, I could set an {if} statement that says "if aspired words are less than blank but more than blank, then show this image" and such to create a similar effect to the bar filling. However, there are two numbers to factor in, how many words achieved AND how many words aspired. I'm not entirely sure how I would use the two in order to make this work. If there was a default number of words they were all aspiring for, like everyone was at 10k, it would just be steady increments upward and bar full at 10k. However, if everyone is changing their aspiration number, I have no way to really do this that I personally know of. I'm not the most coding savvy so someone else might know how and if they do I welcome them to take over. =)

I imagine saying "if number aspired divided by number achieved = blank then show this image" would work awesomely but I'm not sure I can do division with the {if} statements like you can JavaScript. Tim Camara, am I right on that?

[Tim Camara]

Take a look at the style of the warning bars, that's the same effect you're trying to achieve.

[Former Member]

Well through inspect element and style sheet, I can find
<div class="warning-bar warning-low" style="width: 10%;" title="Warning Level: 10%">
<span class="number">10%</span>
</div>
and the CSS behind it but I'm not really sure how that helps me... =/

[Tim Camara]

Use Javascript to do the math based on the two numbers and set the width based on the outcome.

[nleslie]

Thanks for taking a look at this!

I can definitely create the images if that's something that would be helpful. If it's too much trouble, I'm more than willing to go with the current/goal display, I just think the bar would be a cool visual addition. Let me know if there's any other info/images/etc. I can provide that would help you out.

[Joachim]

As a quick note, the progress bars can be fully set up with CSS without actually needing images, if it might help any in the setup of the javascript in the long run.

You can find out more about those here:

www.deviantart.com/art/Let-s-code-CSS-Progress-bar-407688240