PDA

View Full Version : Animated background?



sarahfsk
05-30-2008, 05:12 PM
Is it possible to set an animated gif as the background of an INPUT field? I'm a web app designer and want to indicate that a field is being validated by putting a subtle progress bar in the background of the input field. I tried this using the "background" property of the INPUT's css. The animation shows up fine locally, but when I try accessing the file via http, the animated image disappears.

Searching the web for this turns up a lot of "MySpace animated backgrounds!!!" results -- not quite useful. :rolleyes: If anyone can confirm that this is a browser restriction/bug, or describe a workaround (IE & FF are the supported browsers), I'd appreciate it!

-Sarah

thetestingsite
05-30-2008, 05:29 PM
If you want to test it out, view http://thetestingsite.net/test/animatedInput.html

It appears to be working fine in IE7 and FF.

Hope this helps.

sarahfsk
05-30-2008, 05:49 PM
Thank you!! I think there may have been something wrong with the first image I tried this with, because it's working like a champ now. I appreciate the super-quick response!

-Sarah

djr33
05-31-2008, 11:31 PM
Haha. That looks really cool. (yes, I know, random reply)

jscheuer1
06-01-2008, 01:15 AM
Safari may not allow this. However, I have had luck with Safari allowing background color in a text input IF borders for the text input were specified.

djr33
06-01-2008, 09:26 AM
Safari (2.0/mac) doesn't work with that. But since it's just a bonus addon, that's probably not a huge problem. (Bonus if it works, only.)

jscheuer1
06-01-2008, 11:20 AM
I was referring to Safari 3 Win, which should be like Safari 3 Mac. I don't know if specifying the border will work with background image though or not. I just stumbled upon it recently as a way to get Safari 3 Win to use background color for text inputs, which it will not do for an otherwise plain text input.

thetestingsite
06-01-2008, 08:13 PM
Out of 64 browsers selected from browsershots.org (http://www.browsershots.org), only 5 of them did not work.

Safari 3.0 (Win 2003 server)
Dillo 0.8.6 (PLD Titanium)
Safari 1.3.2 (Mac OS X 10.3)
Safari 2.0.4 (Mac OS X 10.4)
Konqueror 3.5 (Ubuntu 7.10)

djr33
06-01-2008, 10:29 PM
Safari is odd. It's a good browser, but it's like apple doesn't try that hard-- there are a few things that just don't match up.
Anyway, John, I was just confirming what you said, not saying that version 3 worked or anything.

Medyman
06-01-2008, 10:59 PM
Safari is odd. It's a good browser, but it's like apple doesn't try that hard-- there are a few things that just don't match up.

Every browser has it's quirks...IE (of course), Fx, Safari, Opera, the whole lot. But overall Webkit (the browser engine behind Safari) is the only group doing any creative innovation as far as browsers are concerned. For the few things that don't match up, I think it makes up for it with things like the editing toolbar (http://webkit.org/demos/editingToolbar/) (only works in Fx & Safari).

Sorry for the off topic :p

jscheuer1
06-01-2008, 11:31 PM
Well since Safari 3 Win came out, I feel pretty good about writing for Safari Mac. I know that S3W isn't the perfect testing bed for for Safari in general, but it's fairly good. And I have noticed that things can usually be worked out for S3W. On those rare occasions where I get to view the results on a 'real' Safari browser, they have worked out.

I think the border thing with the text input is because the default behavior onfocus in Safari for a text input is for the border to highlight. If you set a border in the stylesheet, this still happens, but somehow just doing so gives you control of the background color. It would probably also work for a background image, but I haven't tested that.