CSS percentage bar concept
I made this!
I was reading an article on Wired which linked to various sites that showed how to make various charts in CSS with no images... none of them managed the text-changing-colour effect that's so popular (in fact the text on some of them was god awful).
I was pretty sure I could do better so I knocked up this concept!
Feel free to steal it (Credit is fine. So is cash. Arf)
I haven't even really tested this, it's just a proof of concept. Don't be shocked if it doesn't work in anything except Firefox.
The javascript is solely for the dynamicness to show it off. All the actual layouting stuff is in the CSS.
It's currently fixed width, unfortunately. I might work on that.
It uses floats and negative margins, so probably isn't very cross compatible as it stands.
Lemme know if this is cool or not. If it is I might spend some time making a decent version.
(, Fri 16 Jan 2009, 21:24, Reply)
Hey that's pretty damn neat for CSS
there is an odd glitch every now and then but that might be IE 7. I reckon it's pretty cool *clicks*
(
Firkinfedup last shat on your wife's tits at, Fri 16 Jan 2009, 21:30,
Reply)
What's the glitch?
I only have IE8 here in which it fucks up royally. Standards testing this is fun, the animation and wait create suspense!
Oh, and it doesn't have the DOCTYPE thing so IE will probably not go into compliance mode.
(, Fri 16 Jan 2009, 21:36, Reply)
it's difficult to say what actually happens
but at a few stages through the progress it just kind of goes "WEWWOOOOO", if you know what I mean? no? lol!
It kind of jumps down then up again if that helps.
Edit: but really quickly, just like 100ms or something.
(
Firkinfedup last shat on your wife's tits at, Fri 16 Jan 2009, 21:44,
Reply)
Yeah mine flickers as well
at 20 something and 70 something
(
Thrill_My_Chinchilla is old and unimproved, Fri 16 Jan 2009, 21:52,
Reply)
Oh
It makes the left hand bar wider before making the right hand one narrower. So they're getting two wide and popping out. Is it fixed now?
Also, I'm less worried about JS related issues as the animation isn't the important part.
(, Fri 16 Jan 2009, 21:52, Reply)
Unfortunately not
i've watched it a few times now and it seems that the bar gets taller, and the button adjusts to compensate the new height too, then like a flicker later it's back to normal again. And as "Thrill_My_Chinchilla" just said above, it's about 20% and 70% that it happens. Could it be some kind of weird rounding issue?
(
Firkinfedup last shat on your wife's tits at, Fri 16 Jan 2009, 21:59,
Reply)
Hmm
Try this one if you have the patience, and see if you can narrow it down?
Also what browser are you using?
(, Fri 16 Jan 2009, 22:06, Reply)
No probs....
IE 7.0.6001.18000 :D
(
Firkinfedup last shat on your wife's tits at, Fri 16 Jan 2009, 22:39,
Reply)
Well that's very interesting
I believe you've found a bug in IE7 :P
... I'll fix this for rev02
Thanks for the helpage :)
(, Fri 16 Jan 2009, 23:02, Reply)
Nice and smooth in Firefox
No glitches and I clicked it a few times
(, Fri 16 Jan 2009, 21:36, Reply)
sweeeeet
good work fella
(
BadBadman saw an incorrect comma placement on, Fri 16 Jan 2009, 21:38,
Reply)
That looks nice and smooth in google chrome on XP.
Although when the bar gets to 50% the black percentage moves to the right to stay on the pink bar. The white percentage seems to be doing what it is supposed to do though.
(, Fri 16 Jan 2009, 22:22, Reply)
This is what IE8 does as well
I had a feeling that negative margins + overflow: hidden wouldn't go well.
(, Fri 16 Jan 2009, 22:28, Reply)
I kinda like that effect
though obviously it's not what was intended.
(
Sn0tters 🇯🇴🇧🇧🇮🇪, Fri 16 Jan 2009, 23:13,
Reply)
Some installers use a similar effect
Where the percentage shown moves with the bar. Possible extra feature I guess!
(, Fri 16 Jan 2009, 23:35, Reply)