Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Emil Wallgren
Emil Wallgren
11,737 Points

JQuery on forms

Hi!

I've got a form for my website which I want to do the following:

  1. When pressing the text-input-box I want a white background-color to fade in (from blue).

  2. If there is a text in the input and the user fills in another input, I want the first input to stay on a white background.

  3. If the user doesn't write anything in the textbox/input, i want it to fade back from white to blue again.

Got any tips?

Regards!

/Emil

2 Answers

geoffrey
geoffrey
28,736 Points

Check again this link, I've managed to do it. It seems that if you want to animate colors, you have to use Jquery & Jquery UI. Whitout Jquery UI It doesn't work. I used as mentionned in my first post the animate method to do that.

Check this link again, hope that helps.

http://codepen.io/Azuk/pen/wudbk

Emil Wallgren
Emil Wallgren
11,737 Points

Hi again!

I'm still not managing to pull this of... Adding jQuery UI via this link https://developers.google.com/speed/libraries/devguide#jquery-ui in the head of my single html-file (the whole website is one page). Then I inserted your code in <script>-tags in the header as well. I also placed the jQuery links (CDN) above the jQuery UI-links as it states in the above mentioned link...Can you see something I've done wrong here?

Emil Wallgren
Emil Wallgren
11,737 Points

Solved the fading-part (in and out with css). So that's no problemo anymore. However, the white color doesnt stay white when the input is not focused.

geoffrey
geoffrey
28,736 Points
geoffrey
geoffrey
28,736 Points

Hey there, here is the beginning of a possible solution I coded quickly.

http://codepen.io/Azuk/pen/wudbk

All works perfectly except the fact colors don't fadeIn fadeOut according the state of the input, it just switch from blue to white and vice versa directly.

I've read a little bit about a good solution, and a proper way to achieve it, could be for exemple to play with the .animate jquery method, you could this way animate the background opacity of the each input's background and change thus the color of their color accordingly.

Unfortunately I 'm a bit in a hurry at the moment I have to go, if ever in the meantime you don't have a solution, I'll try to look at it.

Emil Wallgren
Emil Wallgren
11,737 Points

Thanks Geoffrey :-)

Seems to work great! As said, the only thing missing is the fadeIn & fadeOut. Tried both of them and your .animate method, but can't seem to get it working. Maybe I'm coding it wrong.

/Emil