Saving css class in order to restore

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Saving css class in order to restore

Post 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='';}
        }
    }
}
 
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Re: Saving css class in order to restore

Post 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; ??
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Re: Saving css class in order to restore

Post 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.
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Re: Saving css class in order to restore

Post 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.
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Re: Saving css class in order to restore

Post 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.
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Re: Saving css class in order to restore

Post by VladSun »

[js]document.getElementById(id).className[/js]
There are 10 types of people in this world, those who understand binary and those who don't
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Re: Saving css class in order to restore

Post 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?
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Re: Saving css class in order to restore

Post 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]
There are 10 types of people in this world, those who understand binary and those who don't
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Re: Saving css class in order to restore

Post 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');
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Re: Saving css class in order to restore

Post 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>
There are 10 types of people in this world, those who understand binary and those who don't
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Re: Saving css class in order to restore

Post 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.
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Re: Saving css class in order to restore

Post 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?
There are 10 types of people in this world, those who understand binary and those who don't
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Re: Saving css class in order to restore

Post 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.
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Re: Saving css class in order to restore

Post 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?
There are 10 types of people in this world, those who understand binary and those who don't
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Re: Saving css class in order to restore

Post 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++.
Post Reply