Thread Starter
crucou
(@crucou)
By the way I gave this 5 stars. Great job! And thank you for your generosity.
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.
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. 🙂
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
I am having problems with my site currently but this method works.
I’ll post as soon my site working good again.
@aditya try this:
div.wppb-progress {
width: 316px!important;
float: left;
}
(this worked for me in Chrome’s inspector)
Can you people wait for minute, My code is working pretty fine.
There’s issue with cloudflare.. they motherf#$@# f#$#%cked my site… >:o
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.
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]
Or you can make responsive it by default.
So if user doesn’t have resposive theme it will not affect him. 🙂
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…
Yes.
Well then, [wppb progress=17.5 responsive=true] will be right. 🙂
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).
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.
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).
