Support » Plugin: Progress Bar » Responsive Progress Bar

  • Resolved crucou

    (@crucou)


    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/

Viewing 15 replies - 1 through 15 (of 16 total)
  • By the way I gave this 5 stars. Great job! And thank you for your generosity.

    Plugin Author Chris Reynolds

    (@jazzs3quence)

    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.

    Aditya Pandey

    (@callingmedic911)

    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. 🙂

    Plugin Author Chris Reynolds

    (@jazzs3quence)

    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

    Aditya Pandey

    (@callingmedic911)

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

    Plugin Author Chris Reynolds

    (@jazzs3quence)

    @aditya try this:

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

    (this worked for me in Chrome’s inspector)

    Aditya Pandey

    (@callingmedic911)

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

    Aditya Pandey

    (@callingmedic911)

    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.

    Plugin Author Chris Reynolds

    (@jazzs3quence)

    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]

    Aditya Pandey

    (@callingmedic911)

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

    Plugin Author Chris Reynolds

    (@jazzs3quence)

    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…

    Aditya Pandey

    (@callingmedic911)

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

    Plugin Author Chris Reynolds

    (@jazzs3quence)

    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).

    Aditya Pandey

    (@callingmedic911)

    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.

    Plugin Author Chris Reynolds

    (@jazzs3quence)

    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).

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘Responsive Progress Bar’ is closed to new replies.