Page 1 of 1
Saving css class in order to restore
Posted: Wed Jun 04, 2008 5:36 pm
by Benjamin
I've got this javascript bit of code below which will highlight input fields when they have focus. I have been trying to modify it so that it will retrieve the existing class of an element so that it can be restored when the onblur event is triggers. I don't know javascript well enough to do this though, so any help would be great.
Code: Select all
function highlight()
{
var elements = document.getElementsByTagName("input");
for (i=0; i < elements.length; i++)
{
if (elements[i].type != "button" && elements[i].type != "submit" && elements[i].type != "reset" && elements[i].type != "checkbox" && elements[i].type != "radio")
{
elements[i].onfocus=function() {this.className='active';}
elements[i].onblur=function() {this.className=this.className='';}
}
}
}
Re: Saving css class in order to restore
Posted: Wed Jun 04, 2008 6:01 pm
by califdon
Do you really need to make it that generic? If you do have to do that, I'd think you would need to populate an array with the default classnames of all the elements that you might change, but would it be possible to just have a single default classname for all the elements, so in your onBlur event you would just restore to that default?
Another thought would be that if you only want to "highlight" by changing the color of the text and background, you could just do that without changing the classname. You can always override the individual style elements without changing the underlying classes. So maybe you could just do: onFocus -> style.color:white; style.backgroundColor:blue; and onBlur -> style.color:black; style.backgroundColor:white; ??
Re: Saving css class in order to restore
Posted: Wed Jun 04, 2008 6:11 pm
by Benjamin
Yeah it needs to be generic. It would be fine with a default class, however after form submission some fields may be assigned an error class. This error class is being cleared out with the onfocus event, which is fine, but I'd like to get it back after the onblur event.
EDIT:
Just to be clear, I need to save the existing class for each element into an array, then use the array to restore the previous class on the onblur event.
Re: Saving css class in order to restore
Posted: Thu Jun 05, 2008 11:40 am
by califdon
astions wrote:Yeah it needs to be generic. It would be fine with a default class, however after form submission some fields may be assigned an error class. This error class is being cleared out with the onfocus event, which is fine, but I'd like to get it back after the onblur event.
EDIT:
Just to be clear, I need to save the existing class for each element into an array, then use the array to restore the previous class on the onblur event.
Ickk! Well, if you have to, I guess you have to. Would serialize/unserialize be of any help? I've never used that, so I'm not much help. I think I'd really review the whole application to see if there might be some way to restructure it, to take advantage of defaults. Essentially, you're dealing with state information about each control, and it sounds like each one can be in one of 3 states: normal, error and highlighted. Could you perhaps store "previous state" in a Tag parameter in each control? I see that you're already using Tags to designate "Input" controls; could you do that with the Type parameter, then use the Tags for holding the previous state? That's the only thing that I can think of, other than a messy array structure.
Re: Saving css class in order to restore
Posted: Thu Jun 05, 2008 2:26 pm
by Benjamin
I never hold my breath with Javascript, but is there a way to retrieve the current class of an element? I'm already looping through them so it should be a 1 liner, unless of course it's not possible. I haven't found anything searching.
Re: Saving css class in order to restore
Posted: Thu Jun 05, 2008 3:02 pm
by VladSun
[js]document.getElementById(id).className[/js]
Re: Saving css class in order to restore
Posted: Thu Jun 05, 2008 3:20 pm
by Benjamin
VladSun wrote:[js]document.getElementById(id).className[/js]
Now we might be getting someplace. I see that line of code retrieves the class name by the element id. The highlight function I'm using contains an array of elements with the tagname of input. So I have two questions.
1. Is there a way for me to get the id of an element so that I can pull it's class name? (if not what would you recommend?)
2. Will this work if an element has more than 1 class?
Re: Saving css class in order to restore
Posted: Thu Jun 05, 2008 3:32 pm
by VladSun
Ops, sorry - I haven't looked at your first post, but only the last one.

OK... I would do it this way:
[js]function highlight(activeClass){ var elements = document.getElementsByTagName("input"); for (i=0; i < elements.length; i++) { if (!elements
.type.match("button|submit|reset|checkbox|radio")) { elements.onfocus=function() { this.oldClass = this.className; this.className += ' ' + activeClass; } elements.onblur=function() { this.className = this.oldClass; } } }} highlight('active'); [/js]
Re: Saving css class in order to restore
Posted: Thu Jun 05, 2008 3:49 pm
by Benjamin
Thanks VladSun. For some reason that doesn't work at all. There are no errors.
I should mention that the highlight function is only called once with the window.onload event.
Code: Select all
window.onload = highlight('active');
Re: Saving css class in order to restore
Posted: Thu Jun 05, 2008 3:55 pm
by VladSun
My test were successful on IE7, FF2, Opera9 and Safari3.1:
Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head> <style> .passive { background-color: red; } .active { background-color: blue; } </style> </head> <body> <form method=post action=""> <input type="text" name="" class="passive"> <input type="text" name="" class="passive"> <input type="text" name="" class="passive"></form> <script language="JavaScript"><!-- function highlight(activeClass){ var elements = document.getElementsByTagName("input"); for (i=0; i < elements.length; i++) { if (!elements[i].type.match("button|submit|reset|checkbox|radio")) { elements[i].onfocus=function() { this.oldClass = this.className; this.className += ' ' + activeClass; } elements[i].onblur=function() { this.className = this.oldClass; } } }} highlight('active'); //--></script> </body></html>
Re: Saving css class in order to restore
Posted: Thu Jun 05, 2008 4:20 pm
by Benjamin
Ok, It works when the highlight function is called AFTER the form fields. I tried to call the highlight function with the window.onload event and that does not work. That is the last problem I need to solve.
Re: Saving css class in order to restore
Posted: Thu Jun 05, 2008 4:34 pm
by VladSun
Hm ...
It works for me ® 
when called by
Code: Select all
<body onload="highlight('active');">
Maybe you are replacing the
window.onload event handler somewhere in your code?
Re: Saving css class in order to restore
Posted: Thu Jun 05, 2008 4:43 pm
by Benjamin
Yeah I was calling it from random places pretty much. Placing it in the body tag will work fine. Thank you very much for your help.
Re: Saving css class in order to restore
Posted: Thu Jun 05, 2008 8:21 pm
by VladSun

Glad to help
I see now that you were using
window.onload in inappropriate way ... it should be:
[js]window.onload = function () { highlight('active')};[/js]
Maybe this was the reason for not having this working?
Re: Saving css class in order to restore
Posted: Fri Jun 06, 2008 1:49 am
by Benjamin
Ha now it works. Genius. I'm great at PHP but Javascript just hasn't clicked for me yet. I think I'd have better luck at C++.