Experimenting With Highlighting
Friday, February 27, 2004 at 8:36 pm | 
Comments off
I decided to have a little fun yesterday and worked up a "highlighting" effect for the form fields on this site. I got the idea while I was installing Apple iTunes on my computer, as they used a similar effect for the registration form. I used JavaScript to trigger a function onfocus, which simply sets up some background images on it's various container elements. I used a technique similar to this one to create the borders.
Not sure if people will find it helpful and a nice little touch, or just annoying. What do you think?
Edit: I've now written up a short article on this technique.
Comments
That looks pretty cool Ryan. I wonder, can you preload the images in some way - as there is a pronounced lag (for me anyway) between focusing on the first element and the highlight being drawn?
Obviously, I wouldn't expect to see this again now the images are cached though. Elements 2, 3 & 4 all highlighted instantly.
Like DarkBlue said, there is a definite lag between clicking on the textbox and the textbox lighting up. Also, i think it would add more effect if there was also a hover effect.. maybe a light orange or sumthing...
-Dan
Ok, I believe I've fixed the preload issue. I should have done it before I even uploaded it, as I was aware of it. Anyway, let me know if it is still a problem for you (though as DarkBlue said, the images will probably be cached - you'd have to empty your cache to notice). Seemed to work here, both when I cleared my cache, and when I used different browsers.
Holy smoke batman! Now it looks the business. The preloading works a treat.
Ryan, do you mind if I use this on my site - I would obviously give full credit?
No, I don't mind at all - knock yourself out. :)
That's very kind Ryan. Thank you.
Funny you should mention the field focus, I just recently read
an article at Sitepoint about this very same thing. You can
(theoritically) accomplish it without Javascript by using the :focus
pseudo-class. Of course, IE doesn't recognize that....
The full article can be found at
http://www.sitepoint.com/article/simple-tricks-usable-forms
Yes, I had thought about using the :focus pseudo-class, but as you said, it won't work in IE, and I (obviously) like to support as many browsers as possible. If IE were to have less of a market share, we wouldn't have to worry about it quite as much, but that just isn't the case at this time...
Very nice effect indeed...
Ryan, nice, but in Safari (1.0), there seems to be some glitches... the left border of each field 'sticks on' after it loses focus, and for me, the right border of each field is repeatedon the far right of each field's containing block... email me for a screen grab if needed.
Works seemlessly on Firefox 0.8 and IE5 under OSX though!
Even more helpful might be using this to highlight unfilled required elements... maybe match the color to the red you use in the "Please fill out..." text.
Justin, I tried emailing you twice, but they bounced both times. I would appreciate a screenshot of what's going on in Safari, thought.
Is there a download for this?
Ryan, have emailed you a grab and some comments. Interestingly, you're also competing with Safari's own default active field styling, which is also creating some weird double-active effects. You also have no way of knowing )today, or in the future), if other browsers choose to use their own :focus styling.
Personally, I would stick with :focus, which would work on all standards compliant browsers, would be ignored by those (like Safari) who aren't compliant, or choose to use thier own focus effect.
If you REALLY wanted to target IE browsers on top of a pure CSS :focus solution, you could have a separate style sheet exclusively for IE (hidden from all others with an IE-only conditional comment).
Wow, this looks awesome! I'd stick to using :focus, since the site will still work perfectly even if the border doesn't appear.
Wow, very nice effect.
Oh yeah, I don't think it's possible with the :active pseudoclass because of the DIV hook that Ryan's using. Not sure though.
I tested it on all 6 of my browsers(Opera, Mozilla Firefox 0.8, Mozilla Firebird 0.7(no longer available, switched to Firefox), Netscape 7.1, Internet Explorer 6, Mozilla). It worked great on all of them, except Opera, which doesnt do anything when focused.
-Dan
WOW,
That is like SO cool. I really like it.
Jordon
For those interested, I've posted an article explaining how I did this, and included a .zip of all the necessary files.
I'm still planning to try to fix the Safari error that Justin mentioned, though I'm not sure when that will be, as we're in the process of changing our DSL provider, and it looks we'll be offline for a bit.
Hey, nice job. That could be a very nice enhancement to navigating form field-heavy pages in web-based applications.
John
Very nice, except it doesnt seem to work in Opera 7.21, which is a shame.
I tested in IE 6 to check if you had turned the feature off, but it worked perfectly in that.
Jim
Jim, as far as I can tell, it is actually a bug with Opera 7.2x. See http://www.ryanbrill.com/archives/opera-72x-bug/ for more info.
Comments are automatically closed after 45 days
February 28th, 2004
12:13 AM | #
Very nice! It would be really great if there were a way to apply similar styles to LABEL elements of focused checkboxes and radio buttons, but I think that this might require CSS 3.