WordPress.org

Ready to get started?Download WordPress

Forums

Progress Bar
[resolved] Responsive Progress Bar (17 posts)

  1. crucou
    Member
    Posted 1 year ago #

    Such a wonderful plugin! Simple and easy. THANK YOU!

    I am trying to make the progress bar responsive. I have everything done and looking great. The only issue is when I adjust the width of my browser everything responds perfectly except for the {$progress} which will not render in percentages. This is due to the wppb-animate.js which is overriding it and rendering pixels instead. If I delete wppb-animate.js it becomes completely responsive but then I lose the amazing sleek animation. Is there anyway to fix it to render in percentages to make it completely responsive and still have the animation?

    Thanks for your help!!! :-)

    http://wordpress.org/extend/plugins/progress-bar/

  2. crucou
    Member
    Posted 1 year ago #

    By the way I gave this 5 stars. Great job! And thank you for your generosity.

  3. Chris Reynolds
    Member
    Plugin Author

    Posted 1 year ago #

    To be honest, I hadn't ever looked at that...the plugin is basically a slightly modified implementation of the tutorial here for WordPress: http://css-tricks.com/css3-progress-bars/

    Unfortunately, I'm not a javascript genius, so while I'm sure it's *possible* I couldn't tell you how to do it. I actually had considered taking the animation out entirely to reduce the footprint of the plugin, but left it in because it looks so nice. :) But disabling/removing the javascript is certainly an option -- you may even be able to get the progress to animate using css3 transitions.

  4. Aditya Pandey
    Member
    Posted 1 year ago #

    Yes, there is way. And using CSS.
    Paste this in your theme's style.css :

    div.wppb-progress {
    	width: 100% !important;
    }

    Since I am using this in my sidebar (see here : http://autospace.co/) so I just make its width as much as it can cover that is 100%
    If you're using this progress bar in any post or page, change to required like 25% or something. That depends on you. :)

  5. Chris Reynolds
    Member
    Plugin Author

    Posted 1 year ago #

    It looks like it's not quite doing what you want it to be doing. This is what your progress bar looks like to me in Chrome: http://bit.ly/UCv3RA

  6. Aditya Pandey
    Member
    Posted 1 year ago #

    I am having problems with my site currently but this method works.
    I'll post as soon my site working good again.

  7. Chris Reynolds
    Member
    Plugin Author

    Posted 1 year ago #

    @Aditya try this:

    div.wppb-progress {
         width: 316px!important;
         float: left;
    }

    (this worked for me in Chrome's inspector)

  8. Aditya Pandey
    Member
    Posted 1 year ago #

    Can you people wait for minute, My code is working pretty fine.
    There's issue with cloudflare.. they motherf#$@# f#$#%cked my site... >:o

  9. Aditya Pandey
    Member
    Posted 1 year ago #

    Chris Reynolds: Now open my site. I was not lying. I just know how to use CSS with great responsiveness and if you want, I can provide clear docs how to use it.

  10. Chris Reynolds
    Member
    Plugin Author

    Posted 1 year ago #

    I didn't think you were lying, I just wanted to make sure it worked because I can add that to the plugin as a shortcode option, e.g. [wppb progress=17.5 responsive=true]

  11. Aditya Pandey
    Member
    Posted 1 year ago #

    Or you can make responsive it by default.
    So if user doesn't have resposive theme it will not affect him. :)

  12. Chris Reynolds
    Member
    Plugin Author

    Posted 1 year ago #

    yeah, although it'd always be 100% width which might not be desirable...though I guess you could always just change that in the css...

  13. Aditya Pandey
    Member
    Posted 1 year ago #

    Yes.
    Well then, [wppb progress=17.5 responsive=true] will be right. :)

  14. Chris Reynolds
    Member
    Plugin Author

    Posted 1 year ago #

    Added to the latest version of the plugin (1.0.3). Note, that it's not strictly responsive -- the width doesn't change dynamically when I resize the window, at least it didn't in my testing -- so instead of calling the option "responsive" I called it "fullwidth". When fullwidth is used, it will use the 100% width for all the elements so it will take the width of the containing element (sidebar, post area, etc).

  15. Aditya Pandey
    Member
    Posted 1 year ago #

    To see responsiveness, you must have responsive theme, so that container resizes and tell the progress bar to resize. :)
    As to try out, open my site and resize window, progress bar will respond. :)

    EDIT: Except from taking favor of responsiveness, I would like to suggest you to use custom shortcode control for custom width like `[wppb progress=17.5 responsive=25], it will enable the responsiveness as well as it will set width to 25% for ease.

    EDIT2: I just updated (with some hacks like change in color) and used parameter fullwidth=true and it is fully responsive. Great.

  16. Chris Reynolds
    Member
    Plugin Author

    Posted 1 year ago #

    Admittedly I only tested with Thematic which is what I happened to have installed at the time. You're probably 100% right that it's not responsive, I was just testing to make sure the 100% width worked along with the hard-coded width.

    What I could do would be to have a "width" parameter where you set the width to a percent (width=25) or better yet, you can actually define the width (width=25%/width=25px) and it uses that, then you can set it to whatever you need (or use fullwidth).

  17. Aditya Pandey
    Member
    Posted 1 year ago #

    You misunderstood it. I am taking favor of responsiveness. Since, Thematic is not responsive theme, therefore progress bar will also be not responsive.

    width=25%/width=25px is good idea. But keep fullwidth parameter also, just rename it to responsive. To test please use responsive theme, or check with my site.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic