Transparent background progress bar? - javascript

I'm trying to find an animated progress bar with a transparent background. I would prefer to achieve it using JQuery, Javascript and/or CSS. Is this possible? I'd like something much like this: http://www.fcm.travel/progress_bar.gif Has anyone come across such a thing?
The other questions I've seen on here show static bars, nothing animated much like the example.

You can make anything transparent with CSS. The following makes 75% opacity (25% transparent)
style="opacity: .75; filter: alpha(opacity=75)"
(The extra filter rule is for IE)
Edit: If you care that it works as often as possible on older browsers, you would add the old -webkit- and -moz- rules
style="opacity: .75; filter: alpha(opacity=75); -moz-opacity: .75; -webkit-opacity: .75"
In the event the browser does not support opacity settings, it would automatically default back to 100% opacity which is not transparent or translucent at all

I'm not sure what you mean by transparent, but jquery ui has a progress bar: http://jqueryui.com/demos/progressbar/#animated

Technically, Animated PNG would be neat for this. However the support for it isn't really that wide last time I checked.
So what you could do, seeing you are open for JavaScript solutions, is create a spritemap image based on 24 bit PNG's so it has nice transparancy, that contains every state for the animation. Then with JavaScript and a decent enough timer/interval, simply change the background position for the image so it looks like it's showing a live animation.

I've just made something that would interest You few days ago, take a look at this progress bar

Related

Is there a way I can force chrome to do subpixel rendering for a slow translation?

Im doing a very slow transition of a background image (a view of space that slides slowly to the left). My problem is while it looks beautiful on Firefox, it looks horrible on Chrome. I get a "jittery" effect due to Chrome's lack of subpixel rendering, and the image just snaps to the next pixel. I cannot speed the image up because it will destroy the effect Im trying to achieve. I have tried using TranslateZ() tricks, I have tried every CSS3 effect I could think of to make it look better, Ive tried Kinetic.js, Ive even tried Babylon.js hoping that WebGL would fix my problem.
At this point Im at a loss and I might just have to give Chrome users a static background and cater more to the Firefox users in regards to the neat little things I can do for the UI UX, and then just put a disclaimer on my site saying that the page is best viewed in FF.
I REALLY dont want to do this. Is there ANY work around at all?
You can force subpixel rendering by applying a small transformation:
#container {
transform: rotate(-0.0000000001deg);
-webkit-transform: rotate(-0.0000000001deg);
}
But instead of using JS to make the animation work, why not use CSS3 animations?
If you use transform: translate() browsers will use subpixel-rendering by default.
Also since the performance is better you shouldn't get your jittery/wave motion.
More info on performance here: http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
I've put together a simple demo here: http://jsfiddle.net/yrwA9/6/
(For the sake of simplicity I only used the -webkit- vendor prefixes)

Replace a text color by a background image on mouse over

I would like to know if it's possible to replace a text's color by a background picture.
I don't think that can be done using CSS only, but I'm looking for any other way to do that without using png pictures for the text.
The idea is to keep the background image visible on the font only.
Its really not that easy...
Safari and Chrome offer the property -webkit-mask-image which accomplishes exactly what you want but is not supported by any web browser other than Safari and Chrome... read about it here.
However, there is this alternate "trick"...
Pure CSS Text Gradient
I don't exactly recommend it but I guess you can't really go wrong, the only problem is when you have other elements on the same line as the text, because this gradient will cut right through the page... If these are suitable, writing the JavaScript would be fairly easy but the CSS Text Background Image in it self is quite the question.
1) Using css3 -webkit-background-clip: text; - But only works in chrome & safari
#p:hover{
background:transparent url(http://www.astrosurf.com/~buil/iris/new540/gradient1.jpg);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
http://jsfiddle.net/KHECk/2/
2) Using absolute position. It will work in all browsers. But have to check with your requirement. Not work with all kind of images.
http://jsfiddle.net/KHECk/9/
3) You can use SVG also to generate this effect
http://www.boogdesign.com/examples/svg/pattern-fill.svg

Animating opacity, opacity in general in IE

When IE renders a filter: alpha(opacity=..) whether it's on an image or text. It looks bad.
Is there a way to make IE render normal-browser-like smooth opacity?
If no, how can I easily after a fadeIn (opacity x->1) javascript animation re-render the elements so it doesn't look bad anymore..?
Applying a background colour or an opaque background image to the element should fix this problem. This is due to the way filters work, they're ActiveX components and they're old so they have certain limitations when working with partial transparency.
You can also disable the filter when the animation has completed, using something like:
myElement.filters[0].enabled = false;
A lot of animation libraries use this technique to enable the filter only during the fading so the user will not notice the ugly aliasing as much.
There's another fix (best viewed in IE to understand the point of the post), although it's more of a hack and it's not a good solution in all cases, particularly where you need to alter the size of the image.

Resizing iframe? - Webkit or Firefox

is it possible the proportions within an iframe? e.g. 100%, 50%, 25%, ...
I would like to implement a "magnifying glass" for a webpage or iframe. It does not have to be implemented in Javascript within a website, but even a desktop solution would be great.
Is this a possibility? or would it be incredibly complicated?
Any ideas? Help would be amazing =)
In Firefox you can use the -moz-transform CSS property to zoom, using the scale() value. Note that this doesn't change the amount of space that the element takes up on the page.

IE GIF/PNG Transparency issue with jQuery

Ok, this is pretty weird...
Here's the page in question: http://s289116086.onlinehome.us/lawjournaltv/index.php
The main blue callout background was originally a PNG, but when I applied some jQuery trickery to it (click the numbers in the top right to see what I mean), an ugly white border appeared where the transparency should be. See this screenshot from IE8: http://skitch.com/darkdriving/n62bu/windows-xp-professional
I figured I could sacrifice the quality/flexibility of a PNG and just resaved each of the backgrounds as GIFs and set the matte color to white (for now). Well, I was proven wrong because IE is treating the GIF transparency the same as the original PNGs.
I've read here that the issue with PNGs, Javascript, and IE has something to do with multiple filters can't be applied to one image, but shouldn't GIFs be exempt from this because they lack the Alpha Channel? Is there any way to make this page look similar in IE to Firefox or Webkit browsers?
Thanks in advance!
This is a bug in IE.
No current version of IE supports the opacity CSS proeprty, so jQuery uses the Alpha filter instead. However, filters force the element to be fully opaque, so they don't work orrectly with transparent PNGs.
To use transparent PNGs in semi-transparent elements, the PNGs need to be applied using the AlphaImageLoader filter (even in IE8). For example:
if ($.browser.msie)
$(something).css({
background: 'none',
filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/Folder/Image.png", sizingMethod="scale"),alpha(opacity=100)'
});
(This code works; I'm using it right now)
I basically solved this by loading a different set of images (using PHP) on each page refresh. It's not as dynamic, but my attempts at using the ugly, proprietary CSS filters or other javascript-based plugins were all fruitless. In my eyes, this is clearly one of the biggest bugs I've come across in my time spent hacking away at IE. In fact, I'm suprised it took this long for me to encounter it.
Word to the wise in this case: try to back transparent imagery on a solid color or suffer the consequences in IE.

Categories