PDA

View Full Version : Using an animated bg image in css for text input. It works but...



Daniellez
Mar 21st, 2009, 06:36 AM
I'm using an animated background image (a green checkmark icon) in my stylesheet for the text inputs in an email form as a visual to show the entry is valid. It animates(fades in) on the first input but not in subsequent inputs. I assume it's because the animation doesn't loop (nor do I want it to).

Can you think of a way to force it to animate each time? This is a php form so if there's a php suggestion, I can try it. I posted here, however, because I wasn't certain which solution would work best.

I've attached a screenshot to show how it looks if this helps.


background: #FFF url(../img/bg_form_confirm.gif) no-repeat top right;

PitbullMean
Mar 21st, 2009, 06:50 AM
You able to give a link to your site, this may assist us more.

TinyScript
Mar 21st, 2009, 07:35 AM
I think if you give the image an id like imgname and then call document.getElementById(imgname).src="image.jpg"

it will reload
http://h1.ripway.com/tinyscript/pinballRedux.html
have a look at this script which does this kind of swapping to handle pinball bumpers switching. I did not write the script, but I did modify it to use the soundmanager for bumper sounds.

Daniellez
Mar 21st, 2009, 07:41 AM
Sure...

http://174.132.190.171/dev/liveV/

PitbullMean
Mar 21st, 2009, 08:11 AM
Post your PHP aswell

Daniellez
Mar 21st, 2009, 08:18 AM
Hi, I'll be using this:

http://www.buildwebsite4u.com/advanced/php.shtml

abduraooft
Mar 21st, 2009, 09:40 AM
I've attached a screenshot to show how it looks if this helps.


background: #FFF url(../img/bg_form_confirm.gif) no-repeat top right;


Currently I see http://clients.panopticdesign.com/tmp/img/bg_form_alert.png as the background of your input element, which is not an animated gif.

PS: Validate your code and fix all errors in your markup (http://validator.w3.org/check?uri=http%3A%2F%2Fclients.panopticdesign.com%2Ftmp%2F&charset=%28detect+automatically%29&doctype=Inline&group=0)

Daniellez
Mar 21st, 2009, 10:26 AM
Hi, it passes now:

http://174.132.190.171/dev/liveV/

And to clarify, the alert gif isn't animated yet. I choose not to waste too much time if it doesn't work with the confirm gif.