Oncemade

Rodrigo Soares

Facebook

Search

Nice input labels using jQuery and CSS

Nowadays it's very common to find websites "hiding" form labels in favor of input's default text. Even tough it's a cleaver idea, there is a better way to accomplish the same result without compromising accessibility.

First step is to create the form. I usually have all my forms inside a list:

UPDATE: It's necessary to turn off the "autocomplete" so the inputs don't get messed up.

Markup

Don't forget the "for" attribute, the script will rely on it. Go ahead and add the following CSS:

CSS

Animated Page Scroll with jQuery

Lately I've been seeing lots of websites using animated page scroll, it can be easily done with the help of jQuery. Here is how:

jQuery Code

The code gets the href from the anchor and uses it as the target element. If you want to adjust the scroll speed just change the 500.

Browser Support

Firefox
Safari
Chrome
Opera
Internet Explore 7 & 8
Internet Explore 6

Filed under Javascript animation jQuery scroll

Posted